为什么<选择多个>框在Chrome中使用preventDefault滚动到顶部 [英] Why do <select multiple> boxes scroll to the top with preventDefault in Chrome
问题描述
每次我添加一个事件列表器,以某种方式对选择框进行 preventDefault
更改时,它都会滚动到顶部.
Every time I add an event listner that somehow does a preventDefault
on a change to the select-box, it scrolls to the top.
有关一个最小的示例,请参见下文:
For a minimal example, see below:
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>
重现此怪异行为的步骤是:
Steps to reproduce this weird behaviour is:
- 单击选项
2
- 向下滚动
- 单击任何选项元素
您的视图现在应该已经向上滚动,以使选项 2
位于最顶部.
Your view should now have scrolled up to have option 2
at the very top.
在我看来,这是一种奇怪的行为,真是令人讨厌.
This seems bizarre behaviour to me, which is really annoying.
有关此问题的后续问题:如何阻止这种情况的发生?我正在尝试制作一个脚本,该脚本使选择多个
框的行为就像总是按下ctrl键一样(请参阅
Follow-up question to this: how can I stop this from happening? I'm trying to make a script that makes select multiple
boxes behave as if the ctrl-key is always pressed (see https://stackoverflow.com/a/48217702/1256925) but that code doesn't work when the size
is greater than the amount of options listed.
EDIT :我已经在MS Edge中对其进行了测试(我的PC上没有Firefox),而且似乎可以正确处理此问题,因此这可能是仅适用于Chrome的错误.如果是这样,我的后续问题仍然存在:如何防止Chrome执行此操作?(另外,有人可以告诉我这是否也发生在FF吗?)
EDIT: I've tested it in MS Edge (I don't have Firefox on this PC), and it seems to handle this correctly, so this might be a Chrome-only bug. If so, my follow-up question remains: how do I prevent Chrome from doing this? (Also, could someone update me on whether this happens in FF as well?)
推荐答案
尝试以下解决方法(至少在Chrome中有效):
Try this workaround (it works atleast in 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>
这篇关于为什么<选择多个>框在Chrome中使用preventDefault滚动到顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!