停止事件冒泡的残疾人元素

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