javascript - Stop Event bubbling for a disabled element - Stack Overflow

admin管理员组

文章数量:1344529

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

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

• javascript
• jquery
• event-bubbling

Share Improve this question Follow asked Sep 24, 2013 at 15:45 rajkumartsrajkumarts 40922 gold badges88 silver badges2121 bronze badges 5

• If you show us the html then we might be able to help :) – Reinstate Monica Cellio Commented Sep 24, 2013 at 15:46
• pointer-events is not the way to disable an element, it just cancels all pointer events, and is helpful it you're doing something that requires pointer events on an underlying element. – adeneo Commented Sep 24, 2013 at 15:47
• 1 you need e.stopPropagation() – Venkata Krishna Commented Sep 24, 2013 at 15:48
• @adeneo - yes i need the pointer-events to prevent the pointer events on that element. But when a user clicks on this element its triggering its parent element's action which I don't want to. – rajkumarts Commented Sep 24, 2013 at 15:49
• 2 If you're sure you know what pointer-events are, and how to use them, that's fine, but it doesn't really sound like pointer-events is what you need. Anyway, in the event handler for the parent element just do a e.target === this check, or stop the propagation, but I'm not sure that would work on an element that has no pointer events, and when clicking such an element you're really clicking right throu it, so you most likely are clicking the parent element, at least if that element is "behind" the element with no pointer-events, as that's the whole point. – adeneo Commented Sep 24, 2013 at 15:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

As @adeneo said, if you use pointer-events: none on the child, then parent's event listener can't know if the target is itself or its child. It's like when you click some text inside a paragraph, the event listener can't know if you clicked the text or paragraph's padding.

Then, you can use

document.getElementById('outer').onclick = function(e) {
    /* your code */
};
document.getElementById('outer').addEventListener('click',  function(e) {
    if(e.target !== this) {
        e.stopPropagation();
    }
}, true);

WITHOUT pointer-events: none.

This way, you use capture phase, so you can prevent the execution of children's event handlers (like pointer-events: none), but now you can distinguish if the user clicked your element or its children.

Demo jsFiddle

Problem: You can't use capture phase on old versions of IE.

Advantage: Since it doesn't work on old IE, you don't have to worry about things like

• e = e || window.event
• e.target || e.srcElement
• if (e.stopPropagation) { e.stopPropagation(); } else { e.calcelBubble=true; }

本文标签： javascriptStop Event bubbling for a disabled elementStack Overflow