解决(html标签)span、div标签模拟按钮点击时标签内部文本会被选中(类似于鼠标长按选择的情况)

一、前言

出于需要,我没有直接用button标签和element的el-button标签,我用span模拟了一个标签,并且给与了一个点击事件,但是较快的点击这个模拟按钮,会出现自动选中其中的文本的现象,类似于鼠标长按选择文本的那种情况。造成了不好的体验,我提供一种解决方案。

二、demo展示(直接上图)

未处理之前(点击速度稍微较快就会选中)
before
处理之后(正常了)
after
哈哈,其实这里应该使用Gif的,但是,领会精神就好,嘻嘻。

三、解决方案

出现选中情况时候的代码(未解决之前)

下一节

解决的代码

下一节

代码解析

大家能看到,这里其实就添加了三个属性
style="-moz-user-select:none;"(参考于:https://www.cnblogs.com/jiangtuzi/archive/2013/04/23/3038245.html):该属性可以说有三个属性值:
1、 none:在FF2.0测试,用none,子元素所有的文字都不能选择,包括input输入框中的文字也不能选择。
2、 -moz-all:子元素所有的文字都可以被选择,但是input输入框中的文字不可以被选择。
3、 -moz-none:子元素所有的文字都不能选择,但是input输入框中的文字除外(已经过测试)。
unselectable=“on”(参考于:https://www.cnblogs.com/liuyanxia/p/5619391.html):在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件。
加上该属性的元素不能被选中
onselectstart=“return false;”(参考于:https://www.cnblogs.com/phermis/articles/6061348.html):禁止选择

觉得有帮助就动动小手点个赞吧,欢迎各位小伙伴一起讨论、学习,有疑问就留言吧,哈哈。同时也欢迎指正。

你可能感兴趣的:(前端所遇问题实录)