使用键盘选择 HTML SELECT 列表中的项目不会触发 CLICK 事件答案

【问题标题】：Selecting an item in an HTML SELECT list using keyboard doesnt trigger the CLICK event使用键盘选择 HTML SELECT 列表中的项目不会触发 CLICK 事件
【发布时间】：2010-04-21 12:09:44
【问题描述】：

I have an HTML select list which, when an item is selected, must show different information beneath it.当通过单击（鼠标）选择选择列表项时触发 onclick 或 JQuery 更改事件，但在用户使用按键（键盘）时不会触发。

知道要观察什么事件以确定所选列表项何时更改吗？

这是一个 BASIC 测试示例：

<select id="mylist" name="mylist">
    <option value="">(none)</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<span id="myspan"></span>

<script type="text/javascript">
    $("#mylist").change(function() {
        $("#myspan").html($("#mylist").attr("selectedIndex"));
    });
</script>

【问题讨论】：

您没有在收听click 事件。您正在收听change 事件。相应地更新标题:)
在@BalusC 的辩护中，click 和change 并不相同。 change 仅在选择更改时触发——单击已选择的选项不会触发它。另外，为什么使用键盘更改选项会触发click 事件？如果有什么是愚蠢的，那么它并没有在标题中适当地总结您的问题。最后，为什么用键盘更改选择元素会触发click 事件？亲爱的，这没有多大意义;-)
哇，多么好的态度。我有新粉丝了吗？
安迪，从逻辑上讲，如果再次单击已选择的选项，谁会希望span 中的信息发生变化？如果您测试上面的测试示例，您将看到onclick 和onchange 都由jquery 处理程序处理。
@Jimbo：我不明白你认为这有什么关系——也许你错过了我的意思。仅供参考，如果 onclick 和 onchange 都由您的 change 处理程序处理，则该函数将触发两次。相反，change 事件先于click 事件，并且仅处理change 事件。

标签： javascript jquery html events selectlist

【解决方案1】：

代码将在select 框失去焦点时运行
（按 Tab 或单击 select 框外的任意位置）

【讨论】：

【解决方案2】：

当使用键盘快捷键更改项目时，OnChange 事件因浏览器而异。

例如，在 IE 中，使用键盘和鼠标触发事件的方式相同，但在 Firefox 中，要使用键盘触发事件，则需要在 item 时按 enter选择的是好的。正如 Gaby 指出的那样，当

它的制作方式......

【讨论】：

按回车键确认<select>元素选择是个坏主意，它可能会提交父表单并触发onchange事件。
除非您使用第三世界级的 Web 浏览器，或者如果焦点不在上的选择是完全安全的。你认为残疾人如何触发 onchange？每次都通过跳出和 alt-tab 回退？阅读 WCAG 或 S508 指南了解更多信息。

【解决方案3】：

如果你改变添加属性，它会起作用：

multiple="multiple"

如果您需要保管箱，我会将“全局”keyup 事件处理程序绑定到 document.body 并在那里施展魔法。

【讨论】：