立即触发下拉列表事件（最好是 jQuery）

Question

这与 每次 DropDownList 时触发事件有关使用 jQuery 选择项目 和 如何立即触发下拉列表事件？ 但那里的答案并没有给出我所需要的。

给定一个带有 jQ​​uery+JavaScript 的 HTML 下拉选择，并允许鼠标​​或键盘交互，我想编写这样的代码，以便不仅在最终选择（“更改”事件）时触发操作，而且在用户使用使用键盘上箭头或下箭头更改选择，而无需使用 Enter 键确认该选择。特别是，在选择颜色的下拉菜单中，我希望当用户在选项中向上或向下箭头时不断更改样本的颜色。

以下代码部分基于 每次使用 jQuery 选择 DropDownList 项目时都会触发事件，但是当使用键盘进行选择时，“获胜”版本不起作用，并且在 Safari 和 Safari 上完全失败。谷歌浏览器。我的代码在所有最新版本的 Firefox 中都可以正常工作，并且对于 Chrome 和 Safari 中基于鼠标的操作也可以正常工作；然而，在 Chrome 中，当用户使用键盘时，我似乎能够捕获的唯一事件是“更改”；对于 Safari 来说也是如此，无论它的价值如何。

  (function($) {
      $.fn.dropdownSelect = function(fn) {
          return this.each(function() {
              // I'd expect this to be the normal case for selecting with mouse, but only seems to work in Firefox.    
              $('option', this).click(function() {
                  fn();
              });
              // Selection via arrow keys. Only seems to work in Firefox.  
              $(this).keyup(function() {
                  fn();
              });
              // Next case is crucial for Safari and Chrome, should be harmless for Firefox.
              $(this).change(function() {
                  fn();
              });
          });
      }
  })(jQuery);

然后我像这样调用它：

$('#color-dropdown').dropdownSelect(function () {
     // Act on it here.
});

我也尝试检查“keypress”事件，但无济于事。有什么想法吗？

Answer 1

你想要“keydown”。按键事件不会捕获箭头等控制功能。