javascript – 为什么拖动选择列表会更改或清除选择？

2019-07-03 03:21:46 阅读：117 来源： 互联网

标签：javascript css google-chrome html-select html

在Chrome和Safari中,如果我从外面拖动< select>具有大小属性的列表(即,它呈现为列表而不是下拉列表),所选选项会更改或选择完全消失.实例：

<p>Click anywhere outside the list below and drag over the list. Observe that the selected option becomes deselected.</p>
<select size="4">
  <option selected="">option</option>
  <option>option</option>
  <option>option</option>
</select>

在Windows 7和OS X Yosemite上的Chrome 39中观察到(编辑：至少在优胜美地的Chrome 43中仍然存在),以及Yosemite上的Safari 8. Internet Explorer 11不会显示相同的行为.

如果您没有注意,并在输入中选择一些文本,那么使用鼠标进行超限并且无意中更改选择是很容易的.

这种行为有什么好的理由吗？是否有办法(例如通过CSS / javascript)阻止它发生？我已尝试过dragenter / dragover事件处理,但除非实际被拖动,否则它们不会触发,而即使您在列表上“拖动”空白空间也会发生此行为.

解决方法:

好的,所以这可能是一个错误(应该报告),但修复非常简单.只需要对select元素的onmousemove事件进行preventDefault().

我的猜测是这个bug与一些与拖拽相关的代码有关.

演示：

var elem = document.getElementById('myselect');
elem.onmousemove = function(e){
  e.preventDefault();
};

<p>Click anywhere outside the list below and drag over the list. Observe that the selected option becomes deselected.</p>
<select id="myselect" size="4">
  <option selected="">option</option>
  <option>option</option>
  <option>option</option>
</select>

希望这可以帮助：)

标签：javascript,css,google-chrome,html-select,html
来源： https://codeday.me/bug/20190703/1362664.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 为什么拖动选择列表会更改或清除选择？