按下按键时，jQuery 代码触发两次绑定(bind) ('keyup change' )

Question

我有一个数字输入，每次更改时都会触发 jQuery。为此，我执行了 $('#id').bind('keyup change', ...);，它会在任何 keyup 或鼠标 Controller 发生更改时触发。

这适用于鼠标点击(触发change)和键入数字(触发keyup)。但对于光标键，它会触发 change 和 keyup。我怎样才能让它在所有情况下只触发一次？

以下是显示问题的示例:http://jsfiddle.net/jSjkE/

Answer 1

您对 onchange 事件的概念有误。

当元素的值发生变化时，它不会触发，而是仅在满足 2 个条件时触发:

• 元素模糊(失去焦点)；
• 该元素的值与获得焦点时的值不同。

注意:以上内容适用于 text 类型的输入。对于 checkbox/radio 类型，一旦其 checked 属性发生变化，它就会触发；对于 select 元素，它会在其 checked 属性发生变化时立即触发它选择的选项发生变化。

当您按 Chrome 的 input type="number" 向上/向下箭头时，会触发 onchange 事件(可能是错误的)。您不应该不要依赖它，因为许多其他主要浏览器甚至还没有数字输入的实现，并且可能不遵循此行为。

相反，当您使用 HTML5 时，您应该依赖 oninput HTML5 事件，该事件会在元素值更新时触发。

$(function() {
    var count = 0;
    $('#num').on('input', function(e) {
        console.log('update ' + (++count) + ' Value: ' + this.value);    
    });
});​

<强> Fiddle

编辑:

对于较旧的(非 HTML5)浏览器，您可以使用 keyup 事件作为后备:

$('#num').on('input keyup', function(e) {

对于非 HTML5 浏览器来说，最有弹性的方法是使用 setInterval 不断检查元素的值是否已更改，因为如果您更改 keyup 则不会触发选择一些文本并将其拖到文本框中 - 您可以尝试 .on('input keyup mouseup'，但如果用户使用浏览器的“编辑”>“粘贴”菜单，则不会触发它。

编辑2:

如果你不想使用setInterval，你可以在.on/.bind中放置一个巨大的事件映射并检查如果值已更改，则将当前值存储在 .data() 中元素的:

var count = 0;
$('#num').on('input keyup change', function(e) {
    if (this.value == $(this).data('curr_val'))
        return false;
    $(this).data('curr_val', this.value);

    console.log('update ' + (++count) + ' Value: ' + this.value);
});

Fiddle

我已将 onchange 事件添加到事件映射中，因此即使 oninput 和 onkeyup 失败(使用非 html5 浏览器)浏览器的菜单来粘贴数据)，当元素失去焦点时，onchange 事件仍然会触发。

这是带有注释的 setInterval 和 .data() 的最终编辑避免使用全局变量，因此您可以选择使用哪个后备:

$(function() {
    var $num = $('#num');
    $num.data('curr_val', $num.val()); //sets initial value

    var count = 0;
    setInterval(function(){
        if ($num.data('curr_val') == $num.val()) //if it still has same value
            return false; //returns false
        $num.data('curr_val', $num.val()); //if val is !=, updates it and
        //do your stuff
        console.log('update ' + (++count) + ' Value: ' + $num.val());
    }, 100); //100 = interval in miliseconds
});

<强> Fiddle