摘要:测试结果标签跳转只被事件触发。值得注意的是,在之前被触发。在端,手指触摸屏幕,就会触发标签跳转,但是如果过程中手指有移动,就触发不了标签跳转。
在统计按钮点击跳转次数时,给按钮绑定了touchstart事件,结果导致统计数据翻了近10倍。后改用click事件,数据才正常。固有此文。
问题当我们点击鼠标时,会触发一系列mouse/touch/click事件,a标签转跳是被什么事件触发的?
PC:在 div1 按下鼠标左键, 在div2 中释放鼠标左键,是否会触发click事件?
PC:在 div1 按下鼠标左键后,再在同一绑定事件的节点中移动鼠标,最后释放鼠标左键。 是否会触发click事件?
M: 在 div1 触按屏幕, 再在div2 中释放触按,是否会触发click事件?
M:在 div1 触按屏幕,再在同一绑定事件的节点中移动手指,最后移释放触按。是否会触发click事件?
知道以上5个问题的结果的就可以不往下看了。
demo共用一段html
581. 当我们点击鼠标时,会触发一系列mouse/touch/pointer事件,a标签转跳是被什么事件触发的?
var events = "click touchstart touchend mousedown mouseup".split(" "); var n = 0; var timer = setInterval(function(){ var event = new Event(events[n]); document.getElementById("a").dispatchEvent(event); // 创建一系列事件,直接在元素节点上触发。 console.log(event.type); n++; if (n == events.length) { clearInterval(timer); } },2000);
测试结果: a标签跳转 只被 click 事件触发。
2. PC:在 div1 按下鼠标左键, 在div2 中释放鼠标左键,是否会触发click事件? 3.PC:在 div1 按下鼠标左键后,再在同一绑定事件的节点中移动鼠标,最后释放鼠标左键。 是否会触发click事件?var events = "click mousedown mouseup".split(" "); var divs = document.getElementsByTagName("div"); var handler = function(e){ e.preventDefault(); this.innerHTML += " type:" + e.type + " target:" + e.target.className + " this:" + this.className; }; for (var i=0; i测试结果:
问题2、问题3,在相同绑定事件元素中,按下鼠标左键,即使移动也会触发 click 事件,而在不同元素中不会触发 click 事件。
在测试问题3的过程中我们还发现,按下鼠标左键触发的是 div1 绑定的mousedown事件,释放鼠标左键触发的是 div2 绑定的mouseup事件。
我们可以这样认为,在点击鼠标左键时,只有在同一元素中先触发mousedown事件再触发mouseup事件,click事件才会被触发,a标签才会转跳
4. M: 在 div1 触按屏幕, 再在div2 中释放触按,是否会触发click事件? 5. M:在 div1 触按屏幕,再在同一绑定事件的节点中移动手指,最后移释放触按。 是否会触发click事件?var events = "click touchstart touchend mousedown mouseup".split(" "); var divs = document.getElementsByTagName("div"); var handler = function(e){ e.preventDefault(); this.innerHTML += " type:" + e.type + " target:" + e.target.className + " this:" + this.className; }; for (var i=0; i测试结果:
问题4,在 div1 触按屏幕, 再在div2 中释放触按,只会触发div1的 touchstart 和 touchend 事件,不会触发div2的 touchend 事件,并且不会触发mousedown mouseup click事件。
问题5,只要移动了手指,mousedown mouseup click事件就不被触发。
如果触摸屏幕,这些事件的触发顺序也是很有趣。
touchstart -> touchend -> mousedown -> mouseup -> click。
值得注意的是,touchend在mousedown之前被触发。
总结a标签跳转只被click事件触发。
在PC端,点击鼠标左键,即使在a标签链接上移动鼠标,也会触发a标签跳转。
在M端,手指触摸屏幕,就会触发a标签跳转,但是如果过程中手指有移动,就触发不了a标签跳转。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86209.html
摘要:我们参考小程序的设计思路进行了优化升级,为每一个需要特有化配置的页面添加一个格式的配置文件,配置文件包括导航栏的配置页面级别的配置跳转的配置等,将配置工程化标准化。设置导航栏按钮包含按钮样式的数组通过完成按钮事件的回调。一、背景1.为什么是Weex在公司快速发展的大环境下,App的更新迭代高速、高频,技术团队平均两周便可诞生一款中型App,但App团队只有6个人(iOS 、Android各3...
摘要:在里点击某个之后,后台会计算出跳转的目标返回给前台。每个点击之后,会打开一个对应的应用。本文介绍如何在后台调试这个跳转目标的计算逻辑。字段的值就是该应用对应的应用的存储位置。 在SAP Fiori launchpad 里点击某个tile之后,后台会计算出跳转的目标url返回给前台。 下图中一个个白色的方框就成为tile。每个tile点击之后,会打开一个对应的Fiori应用。 showI...
摘要:在里点击某个之后,后台会计算出跳转的目标返回给前台。每个点击之后,会打开一个对应的应用。本文介绍如何在后台调试这个跳转目标的计算逻辑。字段的值就是该应用对应的应用的存储位置。 在SAP Fiori launchpad 里点击某个tile之后,后台会计算出跳转的目标url返回给前台。 下图中一个个白色的方框就成为tile。每个tile点击之后,会打开一个对应的Fiori应用。 showI...
摘要:在里点击某个之后,后台会计算出跳转的目标返回给前台。每个点击之后,会打开一个对应的应用。本文介绍如何在后台调试这个跳转目标的计算逻辑。字段的值就是该应用对应的应用的存储位置。 在SAP Fiori launchpad 里点击某个tile之后,后台会计算出跳转的目标url返回给前台。 下图中一个个白色的方框就成为tile。每个tile点击之后,会打开一个对应的Fiori应用。 showI...
阅读 993·2021-11-22 13:53
阅读 1533·2021-11-17 09:33
阅读 2309·2021-10-14 09:43
阅读 2765·2021-09-01 11:41
阅读 2239·2021-09-01 10:44
阅读 2870·2021-08-31 09:39
阅读 1425·2019-08-30 15:44
阅读 1836·2019-08-30 13:02