禁止文字选中的办法

参考

• https://segmentfault.com/a/1190000005875000
• http://www.w3school.com.cn/tags/event_onselect.asp
• http://blog.csdn.net/kongjiea/article/details/46742919

问题描述

制作了两个按钮，用来向左右移动项目，里面图省事就没有使用背景图片，用了←和→作为指示

带来的问题是由于相当于使用了文字，快速点击按钮时会选中两个箭头，变为蓝色的选中状态。为了解决这个问题找到了两个办法。

js方法

<div class="picBox" onselectstart="return false;">
屏蔽双击选中文字的区域
</div>

css方法

<div class="picBox" style="user-select:none;">
屏蔽双击选中文字的区域
</div>

onselect事件

onselect 事件会在文本框中的文本被选中时发生，支持该事件的 HTML 标签：《input type=”text”》，《textarea》

当鼠标的左键划过并选中了 input 输入框中的内容后（松开鼠标后），就会触发 onselect 事件。

onselectstart

onselectstart触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）

onselectstart 不被 input 和 textarea 标签支持

onselectstart 事件才是用来实现元素内文本不被选中的正确方法。