7

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

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

4

4 回答 4

8

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

信息：cancelBubble，stopPropagation

于 2009-06-22T08:34:47.373 回答
1

尽管这不能直接解决问题，但在出现更合适的解决方案之前，它可能是一种可行的解决方法。

编写一个调用 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>
于 2009-06-22T09:25:59.907 回答
0

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

于 2009-06-23T19:27:25.590 回答
0

优先于具有大 z-index 的元素

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

于 2010-04-07T11:28:28.570 回答