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

Question

我有一个有样式的按钮

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

Answer 2

正如@adeneo 所说，如果你pointer-events: none在孩子上使用，那么父母的事件监听器就无法知道目标是它自己还是它的孩子。这就像当您单击段落中的某些文本时，事件侦听器无法知道您是否单击了文本或段落的填充。

然后，您可以使用

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

没有pointer-events: none。

这样，您可以使用捕获阶段，因此您可以阻止执行子事件处理程序（如pointer-events: none），但现在您可以区分用户是否单击了您的元素或其子元素。

演示 jsFiddle

问题：您不能在旧版本的 IE 上使用捕获阶段。

优点：由于它不能在旧 IE 上运行，因此您不必担心诸如此类的事情

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