how to trigger click event underlying in jQuery

Question

All:

I have two , overlap partially, top one has class "top", bottom one has class "bottom", what I want to do is trigger both onclick event when I click the overlap area.

How can I do that?

The HTML is like:

.bottom {
  width: 300px;
  height: 200px;
  position: absolute;
  background-color: tomato;
  left: 100px;
  top: 100px;
  opacity: 0.5;
}

.top {
  width: 300px;
  height: 200px;
  position: absolute;
  background-color: lightseagreen;
  left: 200px;
  top: 200px;
  opacity: 0.8;
}

<div class="bottom"></div>
<div class="top"></div>

I want to try event propagation, but this parallel structure seems not for it.

Any suggestion and code example will be appreciated.

Did you see this http://stackoverflow.com/questions/5720837/how-to-detect-elements-overlapping-overlaying-using-javascript http://stackoverflow.com/questions/20633088/jquery-css-overlapping-divs — Maged Makled, Jun 11 '15 at 20:18

score 1 · Answer 1 · answered Jun 11 '15 at 20:21

I have created a plunker for you - http://plnkr.co/edit/M35aIirycIGZQceU7ppp?p=preview

You have to work on co-ordinates in order to achieve the solution.

// Binding click function
$(".bottom, .top").click(function(event){

    // Getting bottom and top elements
    var bottomElement = $(".bottom");
    var topElement = $(".top");

    // Getting co-ordinates of click
    var x = event.pageX;
    var y = event.pageY;

    // Calculating bottom element co-ordinates
     var bLeft = bottomElement.offset().left;
     var bTop = bottomElement.offset().top;
     var bRight = bottomElement.width() + bLeft;
     var bBottom = bottomElement.height() + bTop;

     // Calculating top element co-ordinates
     var tLeft = topElement.offset().left;
     var tTop = topElement.offset().top;
     var tRight = topElement.width() + tLeft;
     var tBottom = topElement.height() + tTop;

     // Default value as false i.e. click was outside of both the elements
     var clickedInsideTop = false;
     var clickedInsideBottom = false;

     // Check whether the click was inside bottom element
     if(x >= bLeft && x <= bRight && y >= bTop && y <= bBottom) {
       clickedInsideBottom = true;

     }

     // Check whether the click was inside top element
     if(x >= tLeft && x <= tRight && y >= tTop && y <= tBottom) {
       clickedInsideTop = true;

     }

     // If both conditions are true, that means click was on the overlapping area, now you can do your work, over here showing an alert
     if (clickedInsideTop && clickedInsideBottom) {

       alert("overlapped area");
     }


  });

Thanks this works. My case is kinda more complex than this, it is a svg path, I do not know how to get the overlap area. — Kuan, Jun 11 '15 at 22:29
Sorry Kuan - not having knowledge about svg - will not be able to help on that - but if you want and can wait - i can try to get knowledge and solve it — Nikhil Aggarwal, Jun 11 '15 at 22:32
Thanks, your answer helps. I guess I will try something in the direction of Georgios Dimitriadis's solution, like document.elementFromPoint(event.pageX, event.pageY), may be we can work together. — Kuan, Jun 11 '15 at 22:45

score 1 · Accepted Answer · answered Jun 11 '15 at 20:46

1

As usual when I help others, I try to go from the code provided. So here you go:

CSS:

top {
      width: 300px;
      height: 200px;
      position: absolute;
      background-color: red;
      left: 200px;
      top: 200px;
      opacity: 0.8;
      z-index: 1;
    }


    .bottom {
      width: 300px;
      height: 200px;
      position: absolute;
      background-color: green;
      left: 100px;
      top: 300px;
      opacity: 0.5;
    }

DOM:

<div class="top"></div>
<div class="bottom"></div>

JS:

var topClicked = false;

$('.bottom').on('click',function(event) {
    $('.top').css('pointer-events', 'auto');
    checkIntersection();
});

$('.top').on('click',function(event) {
    topClicked = true;
    $(this).css('pointer-events', 'none');
    $(document.elementFromPoint(event.pageX, event.pageY)).click();
});

function checkIntersection() {
    if(topClicked) {
        console.log("Intersection click has occured");
    } 
    topClicked = false;
}

answered Jun 11 '15 at 20:46

Georgios Dimitriadis

685
6
16

Thanks, this seems interesting, is this elementFromPoint only return the closest to top element? – Kuan Jun 11 '15 at 22:52
I set "pointer-events" to "none" on .top to make it "transparent" to clicks. and then I make a virtual mouse click on the exact same position the user clicked with document.elementFromPoint so it propagates to the bottom layer. – Georgios Dimitriadis Jun 12 '15 at 06:42
thanks, I wonder how can I do this if there are multiple layers overlap? – Kuan Jun 12 '15 at 16:28
You could do the same in a iterative loop of course! :) – Georgios Dimitriadis Jun 13 '15 at 10:18

score 0 · Answer 3 · answered Jun 11 '15 at 20:15

0

You didn't provide code, so neither will i. But here's a way to start thinking about it:

When you click the one with a higher z-index (the one that registers the click), check if the mouse is also within the bounds of the lower one. You can just get the lower element's offset (relative to the viewport) and its size to check its area.

Good luck. :)

answered Jun 11 '15 at 20:15

Scimonster

32,893
9
77
89

Thanks, this idea sounds good. The only thing is I do not know how to apply it to my case, cos my actual case is irregular shape SVG path. – Kuan Jun 11 '15 at 22:31

how to trigger click event underlying in jQuery

3 Answers3