处理 z-index 图层上的点击事件

Question

我正在构建的地图应用程序中有 2 个 z-index 图层。单击图层放大时出现问题。单击处理程序位于底层 z-index 图层上，我不希望它在单击覆盖图层中的控件时触发。

我遇到的问题是，无论如何都会引发事件，但是当单击顶层上的某些内容时，事件的 originalTarget 属性不是底层中的图像。无论如何要改变这个？

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这称为事件冒泡，您可以使用 event.stopPropagation() 方法（IE 中的 event.cancelBubble() ）来控制它。您还可以通过从元素上的 onwhatever 属性调用的处理程序返回 true/false 来控制它。这是一个棘手的主题，所以我建议你做一些 研究。

信息: cancelBubble , stopPropagation

原文由 SpliFF 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

或者，另一种解决方法是在您不想单击的 div 上使用 CSS 属性 pointer-events: none; ，然后在更深的嵌套组件上使用 pointer-events: all; 在您希望能够单击的 div 上.

这样你就可以将事件传播到所需的组件（如果有原因你不能使用其他解决方案）

原文由 Dominik Januvka 发布，翻译遵循 CC BY-SA 4.0 许可协议