Question

可能重复：
Trigger click on lower element (z-index)

我正在处理一个两个div重叠的应用程序。第一个div在z-index的第二个div之上。我希望当我点击重叠区域时，它应该提醒第二个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>

请尽快帮助或建议我如何操作。

由于

Answer 1

在第二个div的点击事件上调用第一个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的事件处理程序分配给不引人注目的方式。

Answer 2

一种方法是听取第一个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>

我在这里举了一个例子：http://jsfiddle.net/nDkKP/

在第一个div后面的第二个div的警报

2 个答案: