CODEWITHSUNDEEP
htmlcsspointer-eventsonmouseclick
Magnus
Magnus

Reputation: 3722

How to trigger mouse-click event on multiple HTML elements covering each other?

How to trigger multiple mouse-click events on arbitrarily many HTML elements covering each other?

I know you can use pointer-events: none; to let your click pass through your elements, but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?

Upvotes: 3

Views: 2529

Answers (2)

katwekibs
katwekibs

Reputation: 1437

but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?

Events bubble. Which means and event fired on an inner element, will also be received by the parent elements until the top most parent.

<div id="topmost">
    <div id="second">
        <p id="firstp"></p>
    </div>
</div>

Assume you are using jquery. Below is how you would listen to click events from all elements below div.id="topmost".

Since the normal flow of events is for any click event (could be any other type of event) that is fired by any element with in the topmost div element will be bubbled to the outermost element, I only list to topmost click event and then check which element fired that event by checking the id of the target element. e.target will be the actual element that the click was performed on. You can either switch target.attr('id') or run it through if else conditions.

$(function () {
  $("#topmost").on("click", function (e) {
    e.preventDefault();
    var target = $(e.target);
    if(target.attr('id') === "idOfElement"){
       // code to handle the event
    }else{

});

Upvotes: 1

Anthony
Anthony

Reputation: 45

A solution could be to track mouse move using :

$( document ).mousemove();

Store coordinates to a global variable then check its position when your element is clicked. That would give something like :

var mousePos = [0,0];
$( document ).mousemove(function( event ) {
    mousePos[0] = event.pageX
    mousePos[1] = event.pageY
});
$("#target").click(function(){
// Compare mouse coordinates and your items ones using offset, height and width
if(mousePos[0] > $('#target2').offset.left){
    // Do whatever you are willing to do
}
});

Upvotes: 0

Related Questions