Question

每次我添加一个事件列表器，以某种方式对选择框的更改进行preventDefault时，它会滚动到顶部。有关最小示例，请参阅以下内容： document.getElementById（'foo'）。onmousedown = function（e）{ e.target.parentElement.focus（）; e.target.selected =！e.target.selected; e.preventDefault（）; 返回false; } ＆lt; select multiple size =“5”id =“foo”＆gt; ＆LT;选项→1＆LT; /选项＆GT; ＆LT;选项→2＆LT; /选项＆GT; ＆LT;选项→3＆LT; /选项＆GT; ＆LT;选项→4＆LT; /选项＆GT; ＆LT;选项→5＆LT; /选项＆GT; ＆LT;选项→6＆LT; /选项＆GT; ＆LT;选项大于7＆LT; /选项＆GT; ＆LT;选项＆GT 8 LT; /选项＆GT; ＆LT;选项＆GT; 9＆LT; /选项＆GT; ＆LT;选项→10＆LT; /选项＆GT; ＆LT; /选择＆GT; 重现这种奇怪行为的步骤是：单击选项2 向下滚动一下单击任何option-element 您的视图现在应该向上滚动以在最顶部显示选项2。这对我来说似乎很奇怪，这真的很烦人。后续问题：如何阻止这种情况发生？我正在尝试创建一个脚本，使选择多个框的行为就好像总是按下ctrl键一样（参见https://stackoverflow.com/a/48217702/1256925）但是当大小为时，该代码不起作用大于列出的选项数量。编辑：我已经在MS Edge中测试了它（我在这台PC上没有Firefox），它似乎正确地处理了这个问题，所以这可能只是一个Chrome浏览器。如果是这样，我的后续问题仍然存在：如何阻止Chrome执行此操作？（另外，有人可以告诉我这是否也发生在FF？）

Answer 1

尝试此解决方法（它至少在Chrome中运行）：

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

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

1 个答案: