Javascript 第二组警报在第一组后面_Javascript

Javascript 第二组警报在第一组后面

javascript

Javascript 第二组警报在第一组后面,javascript,Javascript,可能重复：我正在处理一个两个div重叠的应用程序。第一个div位于第二个div的上方，具有z索引。我希望当我点击重叠区域时，它应该发出警报，第二个div位于第一个div之后。我的代码如下： <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <title>Click Through a DIV

可能重复：

我正在处理一个两个div重叠的应用程序。第一个div位于第二个div的上方，具有z索引。我希望当我点击重叠区域时，它应该发出警报，第二个div位于第一个div之后。我的代码如下：

<html>
    <head>
        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
        <title>Click Through a DIV to Underlying Elements</title>
        <style type="text/css">
            .sample {
                position:absolute;
                top:100px;
                left:100px;
                height:600px;
                width:600px;
                border: 5px #000 solid;
                pointer-events:none;
                /* THIS IS THE TRICK YOU SEEK */
                background:blue;
            }
        </style>
        <!-- Include he following conditional to get click-throughs to
        work with IE -->
        <!--[if IE]>
            <style type="text/css">
                .sample {
                    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample_600x600.png', sizingMethod='scale');
                    background:none !important;
                }
            </style>
        <![endif]-->
    </head>
    <body>
        <div>
            <!-- Below is the "BACKGROUND DIV" -->
            <div id="first" onclick="alert(this.id);" style="position:absolute;top:200px;left:200px;pointer-events:visible;z-index:100;width:143px;height:83px;overflow:hidden;border: 1px green dashed; background:url(7a.png);"></div>
            <div id="second" onclick="alert(this.id);" style="position:absolute;top:152px; left:265px;width:143px;height:83px;overflow:hidden;border: 1px #900 dashed;pointer-events:visible; background:url(6a.png);"></div>
            <!-- click-through-a-div-to-underlying-elements.html -->
    </body>
</html>


    
        
通过一个DIV单击以访问底层元素
        
.样品{
位置：绝对位置；
顶部：100px；
左：100px；
高度：600px；
宽度：600px；
边框：5px#000实心；
指针事件：无；
/*这就是你寻求的技巧*/
背景：蓝色；
            }

如何执行此操作？

在第二个div的click事件上调用第一个div的click事件

<div id="first" onclick="alert(this.id);" style="position:absolute;top:200px;left:200px;pointer-events:visible;z-index:100;width:143px;height:83px;overflow:hidden;border: 1px green dashed; background:url(7a.png);"></div>
<div id="second" onclick="alert(this.id);document.getElementById('first').click()" style="position:absolute;top:152px; left:265px;width:143px;height:83px;overflow:hidden;border: 1px #900 dashed;pointer-events:visible; background:url(6a.png);"></div>

话虽如此，您应该避免将事件处理程序内联html指定为不引人注目的方式。

一种方法是倾听第一个div上的单击，并查看鼠标坐标是否在第二个div内：

<!-- Below is the "BACKGROUND DIV" -->
<div id="first" style="position:absolute;top:200px;left:200px;pointer-events:visible;z-index:100;width:143px;height:83px;overflow:hidden;border: 1px green dashed; background:url(7a.png);"></div>
<div id="second" style="position:absolute;top:152px; left:265px;width:143px;height:83px;overflow:hidden;border: 1px #900 dashed;pointer-events:visible; background:url(6a.png);"></div>
<script>
firstDiv = document.getElementById("first");
secondDiv = document.getElementById("second");
firstDiv.onclick = function(e){
  console.log(e);
  if(e.clientX > secondDiv.offsetLeft
      && e.clientX < secondDiv.offsetLeft + secondDiv.offsetWidth 
      && e.clientY > secondDiv.offsetTop                       
      && e.clientY < secondDiv.offsetTop + secondDiv.offsetHeight
  ) {
    alert(secondDiv.id);
  } else {
    alert(e.srcElement.id);
  }
}
secondDiv.onclick = function(e){
  alert(e.srcElement.id);
}
</script>


firstDiv=document.getElementById（“第一”）；
secondDiv=document.getElementById（“第二”）；
firstDiv.onclick=函数（e）{
控制台日志（e）；
如果（e.clientX>secondDiv.offsetLeft
&&e.clientXsecondDiv.offsetTop
&&e.clientY


我在这里举了一个例子：
这是虚拟的。而我的应用程序是长度这两个div包含曲线图像。第一个图像与另一个图像重叠。重叠区域也应显示第二个div的警报