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

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