当前位置：文江博客话题详情

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

发布于 2024-07-25 22:47:13 字数 188 浏览 10 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

朮生 2024-08-01 22:47:13

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

信息：cancelBubble、stopPropagation

回复收藏 0 原文

雨后彩虹 2024-08-01 22:47:13

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

编写一个名为 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>

Although this does not address the problem directly it may be a viable workaround until a more fitting solution presents itself.

Write a single function to be called onClick and allow the function enough smarts to know who called it. The function then takes the appropriate action based upon who clicked it. You could send it pretty much anything that would be unique and then use a switch.

simplified example :

<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>

回复收藏 0 原文