javascript - 在 IE8 中重置表单会导致选择输入在未修改值时触发 4 个更改事件

Question

我正在使用以下代码：

<form id="myform">
  <select name="myselect" id="myselect"> 
    <option value="0">Default</option>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>  
  <input type="submit" value="Go">
  <input type="reset" class="reset" value="Reset form">  
</form>

var $element = $('#myselect');

// Save current value of element
$element.data('oldVal', $element.val());

// Look for changes in the value
$element.on("change propertychange keyup input paste", function () {

    // If value has changed... (selects don't play nice -- if they've changed they obviously have to have changed, though)
    if ($element.data('oldVal') != $element.val() || $element.is('select')) {

        console.log("Old Value:", $element.data('oldVal'));
        console.log("new value:", $element.val());

        // Updated stored value
        $element.data('oldVal', $element.val());

    }
});

这是一个jsfiddle：http: //jsfiddle.net/HzkN5/8/

如果您在 IE8 下查看此内容，然后单击“重置表单”而不执行其他操作，则会有一堆事件命中控制台日志：

这很奇怪，因为选择的值根本没有被修改。在最新的 Chrome 或 FireFox 下不会发生这种情况。

我想知道 - 为什么我看到价值变化这么多次？有没有办法只检测真正的选择值变化？

Answer 1

因此，在 IE8 中，无论何时重置表单，它都会触发 propertychanged 事件两次，但它不会触发任何实际的更改事件。所以，如果你只是听那个 - 你应该没问题:)