zepto.js中tap事件的阻止冒泡方法

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