0

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

我有一个 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 事件以及每个 a 元素（对于 .approve-button 和 .cancel-button）的相同事件，但是当我在“a”元素上单击桌面浏览器时，它工作正常，当我在 iOS Safari 浏览器或 WindowsPhone InternetExplorer 中按下“a”元素时，仅适用于父 div 的事件，但不适用于“a”。如果我删除父 div 的事件侦听器，则“a”元素的事件在移动浏览器中可以正常工作。我希望 parent-div 事件在我触摸它的空闲空间时起作用，并且当我触摸“a”元素时 - 我只希望“a”事件监听器继续。你能告诉我如何将它们分开吗？

4

2 回答 2

2

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

$(".listItem").on("click", function(event){
  if (event.target === this) {
    // clicked exactly on this element
  }
});
于 2013-01-12T02:47:12.593 回答
0

我遇到了类似的问题，只是我的内容更嵌套。您想使用: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
});

这会在article内的任何地方触发点击事件，除了.buttons、.minimize和.remove div。

于 2013-10-20T15:06:03.627 回答