javascript - HTML Select change event fires on scroll bar click in Chrome when select tag has a size attribute

Question

我有一个带有大小属性​​的简单选择框，我想在其值更改时调用一个函数。
所以我在 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 事件，而值没有更改。

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

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

这是我应该期待的吗？

注意：仅当您先单击滚动条或箭头时才会发生这种情况。如果单击所选值或其他值，然后单击滚动条/箭头，此行为将停止。

Answer 1

这似乎是 27.0.1453.94 的一个已知问题。

• 问题 244406：带有 MULTIPLE 选项的 SELECT 框在滚动时触发 ONCHANGE 事件
• 问题 16184002：回归：选择列表框在滚动时调度更改事件。（关闭）

Answer 2

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

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

            lastVal = v;
        }
    });
});