为什么触摸事件在事件委托时target总是父元素？

ლ统泽提问于 2026-02-18 09:34:33 阅读 7

移动

在移动端用事件委托处理多个.item元素的touchstart事件，但发现e.target始终返回父元素div.box，而不是实际点击的子元素。我尝试过把事件绑定到父元素并用closest()方法筛选，但子元素上的点击完全没反应。

代码结构是这样的：


<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

JS部分用了：


document.querySelector('.box').addEventListener('touchstart', function(e) {
  const target = e.target.closest('.item');
  if (target) console.log('clicked:', target.textContent);
});

但点击子元素时控制台没有任何输出，直接点击父容器才会触发。是不是触摸事件的事件冒泡机制和鼠标事件不一样？

触摸事件

我来解答赞 2 收藏

反馈

1 条解答

公孙伊芃 Lv1

问题在于你可能在某些样式或布局上影响了事件的触发，比如子元素的尺寸或者触摸区域。确保你的 .item 元素有实际的点击区域并且没有被其他透明层覆盖。

试试直接用 e.target 判断，而不是 closest()，像这样：

document.querySelector('.box').addEventListener('touchstart', function(e) {

  if (e.target.classList.contains('item')) {

    console.log('clicked:', e.target.textContent);

  }

});

如果还是不行，检查一下 CSS，确保 .item 元素不是被意外的层级遮挡了，或者尝试给 .box 和 .item 加上 pointer-events: auto; 看看有没有效果。

2026-02-18 10:00