如何在触摸设备上点击上面的 HTML 元素而不会误触下面的 HTML 元素？

Question

我正在使用html和jQuery制作跨平台移动站点，适用于Android、Windows和iPhone设备。

问题是当我点击一个元素时，如果它位于另一个元素上面，则下面的元素的点击事件也会被触发。

我有一个自定义弹出窗口，在页面中心打开，下面有一个按钮，页面上也有一个具有单击事件的按钮，与其位置正好在下面。

因此，在单击弹出窗口上的按钮时，下面的按钮的事件也会被触发。

如何防止Touch设备上的这种事件。

下拉菜单也是同样的情况，当我选择或单击选项时，下面的按钮的点击事件会被触发。

- Shashank.gupta40

---

你最终解决了这个问题吗？我也遇到了类似的问题。 - Anthony

你能贴一些代码吗？ - skube

你找到任何解决方案了吗？ - Rahmathullah M

我无法找到元素点击事件的解决方案，所以我不得不改变按钮和弹出窗口的位置。至于问题中的图像，我之前使用的是用Jquery和HTML制作的自定义下拉菜单，但为了解决这个问题，我不得不使用HTML的<select></select>标签。 - Shashank.gupta40

Answer 1

你应该使用 event.stoppropagation()：

$('your-element').on('click', function(e){
    e.stopPropagation();
    // other stuff here
})

那应该解决你的问题。

- Atheist