欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 来判断事件是不是通过冒泡触发的。