bulgotanie Zatrzymaj Event dla niepełnosprawnego elementu

Question

Mam przycisk, który ma styl

pointer-events: none; 

I ten przycisk ma element nadrzędny, który wykonuje składany wydarzenie. Nie wiem, jak zapobiec temu wyzwalaniu przez ten przycisk zdarzenia zwijania elementów macierzystych. Jest to spowodowane z powodu przycisk stylu, który jest wskaźnik-events: brak

Dzięki

Answer 1

Zakładając następujący kod HTML:

<div class="collapsible"> 
    <button>Hi</button> 
</div> 

można zrobić coś takiego:

$('.collapsible').click(function(e) { 
    if ($(this).children('button').css('pointer-events') == 'none') return; 

    //do collapse 
}); 

lub może to:

$('.collapsible').click(function(e) {   
    //do collapse 
}); 

$('.collapsible button').click(function(e) { 
    if ($(this).css('pointer-events') == 'none') 
     e.stopPropagation(); 
}); 

Answer 2

Jak powiedział @adeneo, jeśli korzystasz z pointer-events: none na potomku, detektor zdarzeń rodzica nie może wiedzieć, czy cel jest sam, czy jego dziecko. To tak, jak po kliknięciu jakiegoś tekstu wewnątrz akapitu, detektor zdarzeń nie może wiedzieć, czy kliknąłeś tekst lub dopełnienie akapitu.

Następnie można użyć

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

BEZ pointer-events: none.

W ten sposób używasz fazy przechwytywania, więc możesz uniemożliwić wykonywanie programów obsługi zdarzeń dla dzieci (takich jak pointer-events: none), ale teraz możesz odróżnić, czy użytkownik kliknął twój element lub jego elementy podrzędne.

Demo jsFiddle

Problem: Nie można używać fazy przechwytywania na starych wersjach IE.

Advantage: Ponieważ nie działa na starym IE, nie trzeba się martwić o takie rzeczy jak

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