zepto.js中tap事件的阻止冒泡方法
程序员文章站
2022-05-03 18:04:48
...
tap 事件并非原生 JavaScript,所以 e.stopPropagation() 方法并不管用,可以采用下面的方法实现阻止冒泡的效果。
在父元素的 tap 事件中加入判断条件 e.target === this ,满足条件再执行相关的操作,案例如下,原理后面说。
<ul>
<li></li>
</ul>
$("ul").on("tap", function (e) {
if (e.target === this) {
// 要执行的相关操作放到这里面
}
})
$("li").on("tap", function (e) {
e.stopPropagation(); // 这个方法不管用
})
原理
你需要理解事件触发对象 target 和 this 有何不同。
事件触发时,事件对象会作为第一个参数自动传入事件函数,习惯上写作 e,e 中有一个成员 target,这是一个 DOM 对象,指向触发此事件的 DOM 元素,通俗的说,对于 tap 事件你点的是哪个元素,target 就是哪个元素。
this 在事件函数中指向绑定此事件的 DOM 对象,即使使用了事件委托,this 也是指向子元素,this 的指向是不会改变的。
在不发生事件冒泡的情况下,e.target 和 this 指向同一个 DOM 对象,如果事件是通过冒泡触发的,e.target 会变成 this 的子元素,所以可以通过 e.target === this 来判断事件是不是通过冒泡触发的。