HTML当select标签具有尺寸属性时，选择滚动条上的更改事件触发点击Chrome

Question

我有一个带有size属性的简单选择框，我想在值改变时调用一个函数 所以我在select标签上添加了一个onchange事件：

<select onchange="alert(this.options[this.selectedIndex].value);" size="6" id="selecttest">
  <option value = "1">1</option>
  <option value = "2" selected>2</option>
  <option value = "3">3</option>
  <option value = "4">4</option>
  <option value = "5">5</option>
  <option value = "6">6</option>
  <option value = "7">7</option>
  <option value = "8">8</option>
  <option value = "9">9</option>
  <option value = "10">10</option>
  <option value = "11">11</option>
  <option value = "12">12</option>
</select>

见http://jsfiddle.net/MGtJZ/2/。

在Windows 7 Pro中的Chrome [版本27.0.1453.94 m]（我的测试中不在IE或Firefox中），只需单击选择框的滚动条即可触发onchange事件，而不会更改值。 / p>

如果我注册了jQuery更改事件而不是使用纯JavaScript（http://jsfiddle.net/MGtJZ/1/），也会发生这种情况，即删除onchange属性并注册更改事件处理程序，如下所示：

$(function () {
  $('#selecttest').change(function () {
    alert($(this).val());
  });
});

这是我应该期待的吗？

注意：只有先单击滚动条或箭头才会出现这种情况。如果单击所选值或其他值，然后单击滚动条/箭头，此行为将停止。

Answer 1

这似乎是27.0.1453.94的已知问题。

• Issue 244406: SELECT box with MULTIPLE option fires ONCHANGE event on scroll
• Issue 16184002: REGRESSION: Select listbox dispatches a change event on scroll. (Closed)

Answer 2

在我的Chromium安装中，它不会发生。我很确定这是一个错误但不应该被预料到。你可以很容易地解决这个问题：

$(function () {
    var lastVal;
    $('#selecttest').change(function () {
        var v = $(this).val();
        if (v != lastVal) {
            fireYourRealOnChangeEventHere();

            lastVal = v;
        }
    });
});