-1

可能重复：
触发点击下部元素（z-index）

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

我怎样才能做到这一点？

4

2 回答 2

0

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

于 2012-07-11T04:28:27.907 回答
0

在第二个 div 的点击事件上调用第一个 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);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 分配到不显眼的方式。

于 2012-07-11T03:49:13.630 回答