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

StackOverflow https://stackoverflow.com/questions/1026060

题

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

我遇到的问题是，无论什么，事件都会被提升，但是当点击顶层的某些内容时，事件的originalTarget属性不是底层图像。无论如何要改变这个吗？

有帮助吗？

解决方案

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

信息： cancelBubble ， stopPropagation

其他提示

虽然这并没有直接解决问题，但在找到更合适的解决方案之前，它可能是一个可行的解决方法。

编写一个要调用onClick的函数，并允许该函数足够聪明地知道是谁调用它。然后，该功能根据点击它的人采取适当的行动。您可以发送几乎任何独特的东西，然后使用开关。

简化示例：

<html>
<body>

<script type="text/javascript">
function myClickHandle(anID)
{
switch(anID){
case 'bottom': 
      alert("I am on the bottom");
      break;
case 'top':
      alert("I am on the top");
      break;
}
}
</script>

<html>
<div style="z-index:10"><input type=button value='top' onclick="myClickHandle(this.value)"/></div>
<div style="z-index:11"><input type=button value='bottom' onclick="myClickHandle(this.value)"/></div>
</body>
</html>

我认为最佳做法是在控件移动到上层时分离事件处理程序，当控件返回到下层时，您可以重新附加事件。

具有伟大z-index

的元素的优先级

http://api.jquery.com/event.stopPropagation/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top