取消选中之onselect 与 onselectstart 的区别

最新推荐文章于 2025-03-31 21:43:56 发布

mh的63

最新推荐文章于 2025-03-31 21:43:56 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/baidu_39048029/article/details/93379224

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

博客主要介绍了取消选中时onselect与onselectstart的区别。以轮播图左箭头为例，说明不加onselectstart事件会使元素被选中，而Firefox需用CSS样式解决。还指出onselect在文本框文本被选中时触发，onselectstart在目标对象开始被选中时触发，且有不同支持范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

取消选中之onselect 与 onselectstart 的区别

先来看看实现的效果
在这里插入图片描述
右侧轮播图的左箭头，点击后不应该被选中，轮播显示上一张图片的内容。
如果不加onselectstart事件，会出现下图的效果

发现右边的箭头背景变成了蓝色，这是因为它被选中了。
为了解决这个问题，可以使用

  <div onclick="lunLeft()"  onselectstart="return false"><</div>
  <div onclick="lunRight()"  onselectstart="return false">></div>

需要注意的是：Firefox 不支持上面这样的使用方式，在 Firefox 浏览器下可以通过设置 CSS 样式来达到相同的效果

div { -moz-user-select: none; }

由此可见onselectstart 事件才是用来实现元素内文本不被选中的正确方法。

二者的区别

onselect 事件会在文本框中的文本被选中时发生
支持该事件的 HTML 标签：<input type="text">，<textarea>
支持该事件的 JavaScript 对象：window
使用举例：

<input type="text" value="city" onselect="alert('你已经选中了文字！')" />

即当鼠标的左键划过并选中了 input 输入框中的内容时，就会触发 onselect 事件。

onselectstart 触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）
onselectstart 几乎可以用于所有对象
注意：onselectstart 事件不被 input 和 textarea 标签支持