阻止双击选中文本

阻止双击选中文本个人有两种实现方式，可以根据实际环境进行操作。

使用非文本元素

如果我们对一个div元素双击，你会发现，他的文本会被选中，如果不想被选中，只能通过css的方式来进行操作，但是，css一旦设置，就永远不能选中了，也许，我们只是希望在双击时不选择，用户滑动选择时已经可以选中文字。

css阻止选中

.no-select {
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -o-user-select: none;
  /* Opera*/
  user-select: none;
}

不适用css阻止选中

而当我们使用非文本元素的时候，不管怎么双击，都不会触发选中文本，也不会选中到相邻的元素文本。

比如：img

我遇到一个需求，就是一个登陆页面的切换，在右上角，有一个三角形的区域，点击后切换到微信登录，再点击，切换回账号登录。

然后不同的登录，要显示不同的图片，所以我一开始是使用div，图片作为这个div的背景，然后我每次点击，class发生变化，通过class选择器，我们在css里面控制图片的不同。

然而这样导致如果切换过快，也就是双击时，会选中相邻元素的文本，体验有些糟糕。

所以，当我将原来的div替换成img后，这个问题就不会再有了。

阻止事件

<div onselectstart="return false">xxxx</div>

我们可以通过阻止onselectstart的默认行为来阻止文本的选中。

如果使用的vue的话，写法更简单：

<div @selectstart.prevent>xxxx</div>