摘要:与都属于当中的事件,由于它们二者的拼写比较相似,所以最初使用时弄混了两个事件的效果,在此做一个简单的记录。第一次错将事件当成了实现这个效果的事件,试过之后发现不管用,继续研究发现其实应该是用事件来进行控制。
onselect 与 onselectstart 都属于 JavaScript 当中的 DOM 事件,由于它们二者的拼写比较相似,所以最初使用时弄混了两个事件的效果,在此做一个简单的记录。
背景之前在公司的前端项目中,自己写了一个基于 jquery 的分页器,在测试的时候发现了一个问题:当鼠标连续快速点击【下一页】按钮的时候,会将按钮上的文字选中,变成蓝色,体验不是很好。因为当时知道有一个事件是可以控制元素文字是否允许被选中的,但是忘记了怎么用的,于是上网搜索了一番。第一次错将 onselect 事件当成了实现这个效果的事件,试过之后发现不管用,继续研究发现其实应该是用 onselectstart 事件来进行控制。
二者的区别onselect 事件会在文本框中的文本被选中时发生
支持该事件的 HTML 标签:,
支持该事件的 JavaScript 对象:window
使用举例:
即当鼠标的左键划过并选中了 input 输入框中的内容时,就会触发 onselect 事件。
onselectstart 触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)
onselectstart 几乎可以用于所有对象
注意:onselectstart 事件不被 input 和 textarea 标签支持
使用举例(非 Firefox 浏览器下):
我不能被鼠标选中哦
Firefox 不支持上面这样的使用方式,在 Firefox 浏览器下可以通过设置 CSS 样式来达到相同的效果
div { -moz-user-select: none; }
即 onselectstart 事件才是用来实现元素内文本不被选中的正确方法。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79902.html
摘要:与都属于当中的事件,由于它们二者的拼写比较相似,所以最初使用时弄混了两个事件的效果,在此做一个简单的记录。第一次错将事件当成了实现这个效果的事件,试过之后发现不管用,继续研究发现其实应该是用事件来进行控制。 onselect 与 onselectstart 都属于 JavaScript 当中的 DOM 事件,由于它们二者的拼写比较相似,所以最初使用时弄混了两个事件的效果,在此做一个简单...
摘要:背景有一块元素包含一段内容想要利用选中那块元素下的的区间同时我又不想选中以外的内容默认情况下会将整个页面可以选中的内容选中我想被选中实践我想被选中我也想被选中原理利用属性让元素拥有控件自带的类似输入特性那么使用或就会给你选中里面的文本元素由 背景 有一块div元素包含一段内容, 想要利用 CTRL+A 选中那块div元素下的的区间. 同时我又不想选中 div以外的内容, 默认情况下会将...
摘要:背景有一块元素包含一段内容想要利用选中那块元素下的的区间同时我又不想选中以外的内容默认情况下会将整个页面可以选中的内容选中我想被选中实践我想被选中我也想被选中原理利用属性让元素拥有控件自带的类似输入特性那么使用或就会给你选中里面的文本元素由 背景 有一块div元素包含一段内容, 想要利用 CTRL+A 选中那块div元素下的的区间. 同时我又不想选中 div以外的内容, 默认情况下会将...
摘要:方法可用的屏幕高度窗口可用的屏幕宽度浏览器表示的颜色位数用户浏览器表示的颜色位数屏幕的像素高度屏幕的像素宽度对象返回前一个返回下一个返回某个具体页面 事件 事件:鼠标事件,键盘事件,进度事件,表单事件,触摸事件,拖拉事件,其他常见事件.GlobalEventHandler接口DOM(文档对象模型)是JavaScript操作网页的接口,将网页转为一个树状结构,所有的节点都有借口. DO...
摘要:使用语法统一实现跨端组件请关注文章编写跨端组件的正确姿势下篇依靠强大的多态协议,项目中可以轻松使用各端的第三方组件封装自己的跨端组件库。这种做法同时解决了组件命名冲突问题,例如在微信小程序端引用表示调用小程序原生的组件而不是内置的组件。 在chameleon项目中我们实现一个跨端组件一般有两种思路:使用第三方组件封装与基于chameleon语法统一实现。本篇是编写chameleon跨端...
阅读 1505·2021-09-22 15:35
阅读 1985·2021-09-14 18:04
阅读 858·2019-08-30 15:55
阅读 2434·2019-08-30 15:53
阅读 2653·2019-08-30 12:45
阅读 1170·2019-08-29 17:01
阅读 2556·2019-08-29 15:30
阅读 3490·2019-08-29 15:09