Question

我将jquery用于我的Web应用程序。我希望它适用于桌面浏览器和触摸屏设备的移动brousers。

我有一个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）的click和touchend事件以及每个元素的相同事件（对于.approve-button和.cancel-button），但当我点击桌面浏览器时'一个'元素，它工作正确，当我在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
  }
});

Answer 2

我遇到了类似的问题，只有我的内容更嵌套了。您希望使用：not 选择器排除您希望处理其他事件的区域（div，类或其他），如下所示：

<article>
    <div class="title">
        <span class="title"></span>
        <div class="buttons">
            <div class="minimize">+</div>
            <div class="remove">x</div>
        </div>
    </div>
    <div class="post">
        ...
    </div>
</article>

使用jQuery：

$("article :not(.buttons, .minimize, .remove)").click(function (event) {
    // toggle display value of div.post
});

除 .buttons ， .minimize 和 .remove divs。

父母和孩子的单独触摸事件

2 个答案: