Pass Left Click Message to HTML element below another one

Question

I have 2 HTML elements that sit in the exact same position(same x,y values & same width & height). They also have the same z-index.

Both listen to left click events but because one sits over the other element, only one element ever receives a left click event. I use ele.addEventListener("mousedown", touchStart, false); to register/detect left clicks on the elements.

Is there a way to make sure that both elements receive the left click event/message even if they both sit in the same position?

Maybe if I change their z-index to different indexes then they will both receive the message?

Not sure for the HTML as described, but what if you put both elements inside a containing <div> (also at the same position) and then handle clicks on the container? — nnnnnn
– nnnnnn, Commented Nov 3, 2011 at 23:00

Na7coldwater · Accepted Answer · 2011-11-03 23:19:56Z

7

You can use the pointer-events css property:

.click-thru {
  pointer-events: none;
}

This will make it so that clicks on the element travel through to the element below it. However, the top element won't get the click event, so this might not work for you.

You can also try using a global click handler and document.getElementAtPoint to manually trigger the event on the both elements.

// Example (with jQuery)
$(document).click(function(e){
  var mouseX = e.pageX, mouseY = e.pageY;
  if(mouseIsOverElement(mouseX, mouseY, element1))
  {
    $(element1).click();
  }
  if(mouseIsOverElement(mouseX, mouseY, element2))
  {
    $(element2).click();
  }
});

// Possible implementation of mouseIsOverElement
function mouseIsOverElement(x, y, ele)
{
  var result = false;

  // Hide both
  $(element1).hide();
  $(element2).hide();

  // Show the target element
  $(ele).show();

  if(document.getElementAtPoint(x,y)===ele)
  {
    result = true;
  }

  $(element1).show();
  $(element2).show();

  return result;
}

edited Nov 3, 2011 at 23:19

answered Nov 3, 2011 at 23:05

Na7coldwater

1,37912 silver badges24 bronze badges

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

2 Comments

geoffreak Over a year ago

Wouldn't this solution still have the limitation that only one element is receiving a click?

Na7coldwater Over a year ago

Yes, it will have that limitation. I've tried other solutions of using the mouse position to find the element below the clicked one, and triggering the event on it, but in my experience this doesn't work very well with form element like textboxes and such.

geoffreak · Accepted Answer · 2011-11-03 23:01:57Z

0

One option is to place the groups of elements that need to share a click into another element and handle the click there.

If you are designing a game and have many elements where this will be occurring, what you would have to do is actually assign a single click handler to the entire body of the web page and calculate which element is clicked on. It's actually quite quick to do this. For more information, watch this Google Tech Talk.

answered Nov 3, 2011 at 23:01

geoffreak

2,3283 gold badges17 silver badges18 bronze badges

Comments

FiveOhOne · Accepted Answer · 2011-11-03 23:03:24Z

0

On my phone so I can't post proper code, but would it not be a case of binding a function that triggers the second element when you click the first? Something along the lines of:

$('#a').bind('click', function(){
  $('#b').click();
});

In jQuery?

answered Nov 3, 2011 at 23:03

FiveOhOne

866 bronze badges

Collectives™ on Stack Overflow

Pass Left Click Message to HTML element below another one

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related