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），但现在您可以区分用户是否单击了您的元素或其子元素。

<强> Demo jsFiddle

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

优势：由于它不适用于旧的IE，您不必担心

等问题

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

停止事件冒泡禁用元素

2 个答案: