Click event not triggering CSS pointer-events: none

Question

I have two images stacked one above the other. img_top has 'pointer-events: none' set, so clicking on it will pass the click to img_bottom. However if I invoke jQuery's trigger('click') on img_top, the click will not pass on to img_bottom.

Can anybody explain why and find a way of passing the click to the bottom image using jQuery's trigger('click') AND CSS's pointer-events?

Here is the code I am using:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
    #img_holder {
        position: relative;
        width: 20px;
        height: 20px;
    }

    #img_bottom {
        position: absolute;
        background: url('/images/cross.png');
        width: 16px;
        height: 16px;
        z-index: 1;
    }

    #img_top {
        pointer-events: none;
        position: absolute;
        background: url('/images/tick.png');
        width: 16px;
        height: 16px;
        z-index: 2;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $(document).click(function() {
            alert('clicked');
            $("img_top").trigger('click');
        });

        $("#img_bottom").click(function() {
            alert('success');
        });
    });
</script>

<div id="img_holder">
    <div id="img_top"></div>
    <div id="img_bottom"></div>
</div>

Rory McCrossan · Accepted Answer · 2017-01-16 07:53:11Z

4

This is because in javascript events bubble up the DOM. img_bttom is a sibling of img_top, so the event would never bubble to it.

You can force it manually though:

$("#img_top").click(function(event) {
    $("#img_botton").trigger(event);
})

edited Jan 16, 2017 at 7:53

answered Oct 24, 2012 at 15:22

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

Adrien Hingert Over a year ago

This works correctly, but why doea a "real" click then pass through? And how to emulate it?

Rory McCrossan Over a year ago

@AdrienHingert a real click passes through because it is handled by the browser's UI, which looks at mouse position and determines the correct element to raise the event on.

Adrien Hingert Over a year ago

Is there any way that this can be "faked" via JS in such a way that it would pass through as per my example above?

Adrien Hingert Over a year ago

I would need it to go through one image with the pointer-events set to none. Your example skips this.

Rory McCrossan Over a year ago

You say in the OP

img_top has 'pointer-events' set to none, so clicking on it will pass the click to img_bottom. However if I invoke jQuery's trigger('click') on img_top, the click will not pass on to img_bottom.

This code fixes that problem.

|

Collectives™ on Stack Overflow

Click event not triggering CSS pointer-events: none

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related