当我在选择上使用向上或向下箭头时，为啥 jquery 更改事件不触发？

Posted 2023-03-11

【中文标题】当我在选择上使用向上或向下箭头时，为啥 jquery 更改事件不触发？

【英文标题】：why doesn't the jquery change event fire when i use the up or down arrows on a select?当我在选择上使用向上或向下箭头时，为什么 jquery 更改事件不触发？

【发布时间】：2011-11-19 01:28:24

【问题描述】：

我正在使用 jquery 和 livequery 插件收听选择下拉菜单的更改事件。

$(".myDropdown").livequery("change", function () 
);

我注意到的一件事（我使用的是 firefox）是

当我选择焦点时，事件处理程序不会因点击向上和向下箭头而触发（向上和向下箭头会更改条目）

为什么当我上下移动箭头键时不会触发更改事件，是否有建议或解决方法？

【问题讨论】：

假设我们讨论的是 而不是 ：向上和向下箭头不会更改所选条目。编写一些代码，console.log() 每秒或某事对选定的条目进行一次测试，然后自己进行测试。这可能因浏览器而异，但您看到的行为是您应该在大多数用户代理中看到的。

箭头键不会改变选择的值，它们只是改变浏览器中视觉突出显示的条目。当他们完成按箭头键并单击离开时，条目将被更改，按回车键（onblur any way）。

@PaulPRO - 谢谢。 .我才意识到。 .如果您将其移至答案，我将选择它

【参考方案1】：

以下代码（无论如何在 Firefox 3.6 上）同意 OP 并且不同意评论者：

$('body').append('<select/>').find('select')
    .append('<option>one</option)')
    .append('<option>two</option>')
$('body').find('select').keypress(function()  
    console.log('keypress: ' + $(this).val()); )

每当您按下箭头键时，都会将更改的值打印到日志中。

【讨论】：

...但是您正在收听 keypress 事件，而不是 change 事件。这与专门谈论 change 事件的 OP 有何一致之处？

我同意@@Malvolio。争论是箭头键不会改变选择的值，它们只会改变浏览器中视觉突出显示的条目。然而，Malvolio 的代码表明这不是真的。不管他用什么事件来触发对值的检查，最重要的是，他按下了箭头键，值确实发生了变化。我错过了什么吗？

混淆的原因是eventHandler。使用 javascript/Jquery 执行此操作可能，但使用change 事件不可能，因为select 上的更改事件不监听箭头键事件。另一方面，通过 usnig keypress，您可以捕获它们以及其他关键事件，例如通过键入一些字母在选择框上进行搜索...

【参考方案2】：

如果马伏里奥说的是真的，那应该可行

$(".myDropdown").livequery("change", function () 
   // your event handler
).livequery("keypress", function()  
   $(this).trigger("change");
);

http://jsfiddle.net/tW6Su/2/作为证据

【讨论】：

你不能$(".myDropdown").livequery("change keypress", function () 吗？

@MikeWills 如果我错了，请告诉我，livequery 是一个 jQuery 插件 github.com/brandonaaron/livequery，它不像 .live() 那样工作，正如你所说，它可以处理多个事件。跨度>

我不是专家，只是在看到这个问题时提出问题。

【参考方案3】：

我想我会总结一下。

如果您单击选择框中的项目，您正在更改它。如果您通过键向下通过选择框，直到您按下回车键才会被选中，单击关闭或 Tab 键离开。我想这从浏览器到浏览器略有不同，但基本上选择发生在“我完全完成了这个表单字段并现在离开”事件。

如果您希望结果更直接，您可以像这样触发更改事件：

$("select").live("keypress",function()
    $(this).trigger("change");
);

如果您希望所有表单字段都出现这种情况，请尝试使用此选择器：$(":input select textarea")

【讨论】：

:input 将是您最后一个示例的更好选择器。

【参考方案4】：

在元素失去焦点之前不会触发更改事件，即使您正在更改值（正如 Malvolio 所证明的那样）。以下代码 sn -p 将在按下任意键时手动触发更改事件：

$("select").on("keypress",function()
    $(this).trigger("change");
);