• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

阻止双击选中文本

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

使用非文本元素

如果我们对一个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>
0
  • 本文分类:JavaScript
  • 本文标签:阻止文本选中双击onselectstartprevent
  • 流行热度:已超过 45 人围观了本文
  • 最后更新:2020年11月15日 - 18时37分22秒
  • 发布日期:2020年11月15日 - 18时36分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码