为什么 <select multiple> 框在 Chrome 中使用 preventDefault 滚动到顶部

Question

每次我添加一个事件监听器，它以某种方式对 select 框的更改执行 preventDefault 时，它会滚动到顶部。

有关最小示例，请参见下文：

document.getElementById('foo').onmousedown = function(e) {
  e.target.parentElement.focus();
  e.target.selected = !e.target.selected;
  e.preventDefault();
  return false;
}

<select multiple size="5" id="foo">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>

重现此奇怪行为的步骤是：

点击选项2
向下滚动一点
单击任何选项元素

您的视图现在应该已经向上滚动以在最顶部显示选项 2。

这对我来说似乎很奇怪，这真的很烦人。

对此的后续问题：我怎样才能阻止这种情况发生？我正在尝试制作一个脚本，使 select multiple 框的行为就像始终按下 ctrl 键一样（请参阅），但是当 size 更大时，该代码不起作用比列出的选项数量。

编辑：我已经在 MS Edge 中测试过它（我在这台电脑上没有 Firefox），它似乎可以正确处理这个问题，所以这可能是一个Chrome-唯一的错误。如果是这样，我的后续问题仍然存在：如何防止 Chrome 这样做？（另外，有人可以告诉我这是否也发生在 FF 中吗？）

Answer 1

试试这个解决方法（它至少在 Chrome 中有效）：

document.getElementById('foo').onmousedown = function(e) {
  e.preventDefault();
  var st = this.scrollTop;
  e.target.selected = !e.target.selected;
  setTimeout(() => this.scrollTop = st, 0);
  this.focus();
}

document.getElementById('foo').onmousemove= function(e) {
    e.preventDefault();
}

<select multiple size="5" id="foo">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>

为什么 <select multiple> 框在 Chrome 中使用 preventDefault 滚动到顶部

Why do <select multiple> boxes scroll to the top with preventDefault in Chrome

html

javascript

google-chrome

preventdefault