You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何判断元素是否在事件冒泡传播树中?是否有替代实现方案?

解决方案

最优方案:使用原生Element.closest()方法

Element.closest() 方法会从调用元素本身开始,逐级向上遍历祖先元素,返回第一个匹配指定CSS选择器的元素,如果没有匹配项则返回null,完美适配你的需求,不需要手动限制遍历层级,代码更简洁通用。
修改后代码如下:

hammertime.on('pan', function(e) {
  if(e.target.closest('.disableEvent')) return false
  move()
})

该方法兼容性覆盖绝大多数现代浏览器(Chrome 41+、Firefox 35+、Safari 9+),常规业务场景可以直接使用。

兼容旧环境的自定义实现方案

如果你的项目需要兼容不支持closest的极旧版本浏览器,可以自己实现向上遍历的逻辑,支持任意层级检查:

// 封装通用检查方法
function hasDisableAncestor(el) {
  while (el) {
    if (el.classList?.contains('disableEvent')) return true
    el = el.parentElement
  }
  return false
}

hammertime.on('pan', function(e) {
  if(hasDisableAncestor(e.target)) return false
  move()
})

内容的提问来源于stack exchange,提问作者Akshay K Nair

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.25 01:45:04