javascript - 为禁用的元素停止事件冒泡

Question

我有一个有样式的按钮

pointer-events: none;

并且这个按钮有一个执行可折叠事件的父元素。我不知道如何防止此按钮触发其父元素的可折叠事件。这是因为按钮样式是 pointer-events: none 造成的

谢谢

Answer 1

假设以下 html:

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

你可以这样做:

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

    //do collapse
});

或者可能是这样的:

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

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