Stop Event bubbling for a disabled element

Question

I have a button that has a style

pointer-events: none;

And this button has a parent element that performs a collapsible event. I don't know how to prevent this button from triggering its parent elements collapsible event. This is caused because of the button style which is pointer-events: none

Thanks

Answer 1

Assuming the following html:

<div class="collapsible">
    <button>Hi</button>
</div>

You could do something like this:

$('.collapsible').click(function(e) {
    if ($(this).children('button').css('pointer-events') == 'none') return;

    //do collapse
});

or maybe this:

$('.collapsible').click(function(e) {        
    //do collapse
});

$('.collapsible button').click(function(e) {
   if ($(this).css('pointer-events') == 'none')
       e.stopPropagation();
});