谷歌浏览器的 <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 上运行，而且似乎只在 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，所以我更相信它们。