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 事宜才是用来完成元素内文本不被选中的准确要领。