2015-04-28 69 views
6

現在,我有一個監聽點擊屏幕的事件監聽器。屏幕上還有一個按鈕。當我點擊按鈕時,事件監聽器將在onclick之前執行。我可以讓onclick擁有更高的優先級嗎?onClick優先於JavaScript中的addEventListener?

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

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

單擊該按鈕還會觸發事件處理程序。 1顯示在2之前,當我點擊按鈕時。我想要2先顯示。

+0

你能提供一些代碼嗎? – AvetisG

+0

在'clicked()'定義之前,你就錯過了'function'關鍵字 – devnull69

+1

在這個小提琴中,你會看到2顯示在1 ...之前,因爲它應該。你的問題必須在別的地方:http://jsfiddle.net/wte5dpq8/4/ – devnull69

回答

12

addEventListner的第三個參數是useCapture flag。如果將其設置爲true,則處理程序將在事件行進時執行下降button元素。但是,如果你把它設置爲false,該處理器將被同時事件冒泡觸發:

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

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

在您的例子中,onclick應該點擊之前執行body標籤。如果您想扭轉執行順序,您應該在body的活動capture

+0

創建風格的答案:)喜歡的形狀 – M98

0

一個解決方案是使用內聯不同。當.addEventListener需要等待DOM時,另一方面內聯onclick在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/