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 stackoverflow.com/questions/5720837/… stackoverflow.com/questions/20633088/… — Maged Makled
– Maged Makled, Commented Jun 11, 2015 at 20:18

Georgios Dimitriadis · Accepted Answer · 2015-06-11 20:46:02Z

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, 2015 at 20:46

Georgios Dimitriadis

6856 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kuan Over a year ago

Thanks, this seems interesting, is this elementFromPoint only return the closest to top element?

Georgios Dimitriadis Over a year ago

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.

Kuan Over a year ago

thanks, I wonder how can I do this if there are multiple layers overlap?

Georgios Dimitriadis Over a year ago

You could do the same in a iterative loop of course! :)

Nikhil Aggarwal · Accepted Answer · 2015-06-11 20:21:58Z

1

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");
     }


  });

answered Jun 11, 2015 at 20:21

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

4 Comments

Kuan Over a year ago

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.

Nikhil Aggarwal Over a year ago

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

Kuan Over a year ago

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.

Nikhil Aggarwal Over a year ago

Sure i will be more than glad.

Scimonster · Accepted Answer · 2015-06-11 20:15:45Z

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, 2015 at 20:15

Scimonster

33.5k10 gold badges79 silver badges92 bronze badges

1 Comment

Kuan Over a year ago

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.

Collectives™ on Stack Overflow

how to trigger click event underlying in jQuery

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related