Question

至少IE9和IE10有奇怪的行为。

我有四个输入字段并订阅他们的更改事件。我有逻辑，它禁用更改事件处理程序中的第一个输入字段。所以案例：我在第一个输入字段中输入一些值，然后单击第二个输入字段。结果，第一个输入的更改事件处理程序被触发。所以我的光标在第二个输入字段内，我输入一些值。之后，我点击第三个输入字段。因此，预期的行为是第二个输入字段的更改事件hadler被触发，但不是，它没有被触发。 所以现在光标在第三个输入字段内，我输入那里的值并点击第四个字段。结果，第三个字段的更改事件hadler被触发。

结论。这种行为我只在IE9 -IE10中重现。未在IE8中测试过。在Chrome中，会触发每个输入字段的更改处理程序。所以可能有人有这样的情况？ IE中有错误吗？

以下是jsfiddle

的链接

HTML

<div id="content">
    <div>
        <label>First field</label>
        <input type="text"  id="one" tabindex="1" />
    </div>
    <div>
        <label>Second field</label>
        <input type="text"  id="two" tabindex="2" />
    </div>
    <div>
        <label>Thitd field</label>
        <input type="text"  id="three" tabindex="3" />
    </div>
    <div>
    <label>Fourth field</label>
        <input type="text"  id="four" tabindex="3" />
    </div>
    <div id="result">
    </div>
</div>

的Javascript

$('input').on('blur', function (evt) {
 var $input = $(evt.target);
    var msg = '<div style="color:red;">' + $input.prop('id') + ' field blur event fired. Value is: ' +     $input.val() + '</div>';    
    addMsgToResult(msg);
});

$('#one').on('change', function (evt) {
     var $input = $(evt.target);
   addChangeEventMessage($input);
    $input.prop('disabled', true);
});

$('#two, #three, #four').on('change', function (evt) {
    var $input = $(evt.target);
   addChangeEventMessage($input);
});

function addChangeEventMessage($input){
    var msg = '<div style="color:blue;">' +$input.prop('id') + ' field change event fired. Value is: ' + $input.val()+ '</div>';
    addMsgToResult(msg);
}

function addMsgToResult(msg){
    $('#result').append(msg);
    console.log(msg);
}

Answer 1

是的，这很奇怪。

但是将第一个输入字段的禁用封装成这样的小超时似乎“修复”了这个问题：

setTimeout(function() { $input.prop('disabled', true); }, 1);

http://jsfiddle.net/45fcF/56/

不会触发输入字段的更改和模糊事件

1 个答案: