2

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

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

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

这是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);
}
4

1 回答 1

0

是的，这很奇怪。

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

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

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

于 2013-10-17T14:42:03.480 回答