onselect 与 onselectstart 的区分

2024年4月2日 203次阅读 来源: Kevin

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

    原文作者：Kevin
    原文地址: https://segmentfault.com/a/1190000005875000
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞