谷歌瀏覽器的bug的onclick <select>元素

Question

HTML的：

<select id="page"> 
    <option value="none">--</option> 
    <option id="about" value="about">About</option> 
</select> 

JS：

document.getElementById('about').onclick = function(){ 
    alert('normal onclick'); 
} 
$("#about").click(function(){ 
    alert("jquery click") 
}); 

他們沒有在Chrome工作，好像只有鉻

發生了什麼事？

這裏去了的jsfiddle：http://jsfiddle.net/S9ZK3/2/

Answer 1

把select元素而不是option上的事件處理程序，它會在所有的瀏覽器。使用change和keyup事件：

$('#page').on('change keyup', function() { 
    var selected = this.value; 
    if(selected == 'about') 
     alert('About!'); 
}); 

Updated fiddle

爲什麼兩個change和keyup事件？ change事件處理鼠標交互，當您使用箭頭鍵或其他鍵在選擇器中上下導航時，keyup會使選擇器響應。

或者，您可以省略keyup並且只收聽change事件。然後，如果您打開選擇器並使用光標鍵上下導航，則只有按Enter鍵後纔會發生任何事情。這將觸發一個change事件。

在很多情況下，通過鍵盤上下瀏覽列表時，向用戶提供即時反饋更有幫助，並且正在傾聽change keyup這樣做。

爲什麼change而不是click？你也可以使用，但即使這個值沒有真正改變，任何點擊都會觸發click事件。 OTOH，即使用戶只需點擊已經選擇的選項，您也可以想要觸發事件，因此在這種情況下，click事件會更好。

實際上，經過多次測試後，click與change問題有點多。使用選擇列表普通鼠標交互允許兩個稍微不同的方式使用它：

1. 按下選擇鼠標，把它壓下去，把它卷在某個選項，並最終將其釋放。

2. 在選擇器上按下鼠標並釋放它。選擇器打開以顯示選項。將鼠標滾動到選項上（此時按鈕未關閉）​​，最後單擊選項上的按鈕。

如果你聽的click事件，而不是change，然後在情況＃2的事件觸發兩次，在最初點擊和最終點擊的是選擇一個選項。因此，您可以使用click或change，具體取決於您是想要點擊還是隻需要最後一個選項。

我必須補充一點，我沒有在這裏徹底測試click，但我已經非常徹底地測試了change和change keyup，所以我相信那些更多。