Javascript 未触发输入字段的更改和模糊事件

至少IE9和IE10有奇怪的行为

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

结语。这种行为我只在IE9-IE10中重现。没有在IE8中测试。在Chrome中，会激发每个输入字段的更改处理程序。那么可能有人有这种情况？ IE中有bug吗

这里是链接到

HTML

第一场
第二场
Thitd字段
第四场

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);
}

$（'input'）。打开（'blur'，函数（evt）{
变量$input=$（evt.target）；
var msg=''+$input.prop（'id'）+'字段模糊事件已激发。值为：'+$input.val（）+''；
addMsgToResult（味精）；
});
$（'#one'）。关于（'change'，function（evt）{
变量$input=$（evt.target）；
addChangeEventMessage（$input）；
$input.prop（'disabled'，true）；
});
$（'two，'three，'four'）。关于（'change'，function（evt）{
变量$input=$（evt.target）；
addChangeEventMessage（$input）；
});
函数addChangeEventMessage（$input）{
var msg=''+$input.prop（'id'）+'字段更改事件已激发。值为：'+$input.val（）+''；
addMsgToResult（味精）；
}
函数addMsgToResult（msg）{
$（“#结果”）.append（msg）；
控制台日志（msg）；
}
是的，这很奇怪

但是，将第一个输入字段的禁用封装到一个小的超时中，就像这样似乎可以“修复”问题：

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

你问题中的JS与你的小提琴不一样。你为什么要设置
$input=$（evt.target）
而不是
$input=$（这个）
？我想这没关系。它不影响结果，只是在这里更新了javascript
setTimeout(function() { $input.prop('disabled', true); }, 1);