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

一、前言

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

二、demo展示(直接上图)

未处理之前(点击速度稍微较快就会选中)

处理之后(正常了)

哈哈，其实这里应该使用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)：禁止选择

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