javascript - parent 和 child 的触摸事件分开

Question

我的 Web 应用程序使用 jquery。我希望它对于桌面浏览器和触摸屏设备的移动浏览器都是正确的。

我有一个 div，里面有一些元素:

    <div class="well listItem element-div alert-error" data-state="removing">
     <strong>Item title</strong> <small>Items count</small>
     <div class="pull-right" style="margin-top: -5px;">
      <a class="btn btn-success approve-button"><i class="icon-ok icon-white"></i></a>
      <a class="btn btn-danger cancel-button"><i class="icon-remove icon-white"></i></a>
     </div>
</div>

我捕获了 .listItem 类(顶级 div)的单击和 touchend 事件以及每个 a 元素(对于 .approve-button 和 .cancel-button)的相同事件，但是当我单击桌面浏览器上的 ' a' 元素，它工作正常，当我在 iOS Safari 浏览器或 WindowsPhone InternetExplorer 中按下 'a' 元素时，仅适用于父 div 的事件，但不适用于 'a'。如果我删除父 div 的事件监听器，“a”元素的事件在移动浏览器中可以正常工作。我希望当我触摸它的可用空间时，parent-div 事件起作用，并且当我触摸“a”元素时 - 我只希望“a”事件监听器继续。你能告诉我如何分离它们吗？

Answer 1

您是否尝试过检查事件目标？

$(".listItem").on("click", function(event){
  if (event.target === this) {
    // clicked exactly on this element
  }
});