onselect 与 onselectstart 的区别

onselect 与 onselectstart 都属于 JavaScript 当中的 DOM 事件，因为它们两者的拼写比较类似，因此最初使用时弄混了两个事件的效果，在此作一个简单的记录。

背景

以前在公司的前端项目中，本身写了一个基于 jquery 的分页器，在测试的时候发现了一个问题：当鼠标连续快速点击【下一页】按钮的时候，会将按钮上的文字选中，变成蓝色，体验不是很好。由于当时知道有一个事件是能够控制元素文字是否容许被选中的，可是忘记了怎么用的，因而上网搜索了一番。第一次错将 onselect 事件当成了实现这个效果的事件，试过以后发现无论用，继续研究发现其实应该是用 onselectstart 事件来进行控制。

两者的区别

• onselect 事件会在文本框中的文本被选中时发生

• 支持该事件的 HTML 标签：<input type="text">，<textarea>

• 支持该事件的 JavaScript 对象：window

• 使用举例：

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

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

• onselectstart 触发时间为目标对象被开始选中时（即选中动做刚开始，还没有实质性被选中）

• onselectstart 几乎能够用于全部对象

• 注意：onselectstart 事件不被 input 和 textarea 标签支持

• 使用举例（非 Firefox 浏览器下）：

<div onselectstart="return false;">我不能被鼠标选中哦</div>

• Firefox 不支持上面这样的使用方式，在 Firefox 浏览器下能够经过设置 CSS 样式来达到相同的效果

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

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