alert of second div behind the first div

Question

Possible Duplicate:
Trigger click on lower element (z-index)

I am working on an application in which two divs are overlapping. First div is above the second div with z- index. I want that when I click on overlapping region it should give alert of second div which is behind the first div. My code is below:

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

How can I do this?

[This](http://stackoverflow.com/questions/7999271/lower-layer-z-index-with-hyperlink-becomes-disabled-when-next-layer-is-display) and [this](http://stackoverflow.com/questions/6740242/click-link-below-a-higher-z-index-div) too — Jashwant, Jul 11 '12 at 04:16

score 0 · Answer 1 · answered Jul 11 '12 at 03:49

Invoke the click event of first div on the click event of second 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>

Having said that you should move away from assigning event handlers inline html to unobtrusive way.

this two div contain curve image . first image is overlapping on another. the overlapping region should display alert of second div — Rajanikant Shukla, Jul 11 '12 at 04:50

score 0 · Answer 2 · answered Jul 11 '12 at 04:28

One approach would be to listen for the click on the first div and see if the mouse co-ordinates are inside the second 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>

I put an example here: http://jsfiddle.net/nDkKP/

alert of second div behind the first div

2 Answers2