禁用元素的事件冒泡停止

Question

我有一个样式化的按钮。

pointer-events: none;

这个按钮有一个父元素，会触发一个可折叠的事件。我不知道如何防止这个按钮触发它父元素的可折叠事件。这是由于按钮样式的 pointer-events: none 导致的。

谢谢。

- rajkumarts

---

如果你能给我们展示 HTML，我们也许就可以提供帮助 :) - Reinstate Monica Cellio

pointer-events 不是禁用元素的方法，它只是取消所有指针事件，如果您需要基础元素上的指针事件，那么它会很有帮助。 - adeneo

你需要使用 e.stopPropagation()。 - Venkata Krishna

@adeneo - 是的，我需要使用pointer-events来防止该元素上的指针事件。但是当用户单击此元素时，它会触发其父元素的操作，而我不希望这样。 - rajkumarts

如果你确定了解什么是指针事件以及如何使用它们，那很好，但似乎指针事件并不是你所需的。无论如何，在父元素的事件处理程序中只需进行e.target === this检查，或者停止传播，但我不确定对于没有指针事件的元素是否起作用，当单击此类元素时，你实际上是直接穿过它点击父元素，因此，在某种程度上，至少如果该元素在没有指针事件的元素“后面”，就像这个整体的意义一样。 - adeneo

Answer 1

假设以下是html:

假设以下是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();
});

- Jason P

---

具有 pointer-events:none 属性的元素不会触发事件处理程序。 - Oriol

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

- Oriol