木灵鱼儿

木灵鱼儿

阅读:763

最后更新:2020/11/15/ 18:37:22

阻止双击选中文本

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

使用非文本元素

如果我们对一个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>

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 763

相关文章