2015-04-28 37 views
6

W tej chwili mam detektor zdarzeń, który słucha kliknięcia na ekranie. Jest również przycisk na ekranie. Kiedy kliknę przycisk, detektor zdarzeń zostanie uruchomiony przed onclick. Czy jest sposób, w jaki mogę dokonać onclick mają wyższy priorytet?onClick priorytet nad addEventListener w javascript?

<script> 
document.body.addEventListener('click',function(){alert('1');}, false); 

function clicked() { 
    alert('2'); 
} 
</script> 
<button onclick="clicked()">Click this</button> 

Kliknięcie przycisku uruchamia również procedurę obsługi zdarzeń. 1 pokazuje przed 2, kiedy klikam przycisk. Najpierw chcę pokazać 2.

+0

Czy możesz podać kod? – AvetisG

+0

brakuje słowa kluczowego 'function' tuż przed twoją definicją" kliknięcia() " – devnull69

+1

W tym skrzypce zobaczysz 2 pokazy przed 1 ... tak jak powinno. Twój problem musi być gdzieś indziej: http://jsfiddle.net/wte5dpq8/4/ – devnull69

Odpowiedz

12

addEventListner jest trzeci argument jest useCapture flag. Jeśli ustawisz go na true, program obsługi zostanie wykonany, gdy zdarzenie zostanie przeniesione w dół do elementu . Jednakże, jeśli ustawisz go false, uchwyt zostanie uruchomiony, gdy zdarzenie jest przepuszczanie up:

capture phase | |/\ bubbling up 
-----------------| |--| |----------------- 
| element1  | | | |    | 
| -------------| |--| |-----------  | 
| |element2 \/| |   |  | 
| --------------------------------  | 
|  W3C event model     | 
------------------------------------------ 

Od: http://www.quirksmode.org/js/events_order.html#link4

W swoim przykładzie onclickpowinny być wykonywane przed kliknięciem Handler na etykiecie body. Jeśli chcesz odwrócić kolejność wykonywania, powinieneś capture wydarzenie pod body.

+0

Utwórz odpowiedź stylu :) Uwielbiał kształt – M98

0

Jednym z rozwiązań byłoby użycie inline w inny sposób. Kiedy .addEventListener trzeba poczekać na DOM, z drugiej strony wbudowany onclick wiąże się podczas ładowania DOM.

<script> 
document.body.addEventListener('click',function(){alert('1');}, false); 

function clicked() { 
    alert('2'); 
} 
</script> 
<button onclick="alert('2');">Click this</button> 

JSFIDDLE: http://jsfiddle.net/8j9q23jw/