谷歌浏览器的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，所以我相信那些更多。