鱼C论坛

 找回密码
 立即注册
查看: 1720|回复: 0

js与css阻止元素被选中及清除选中的方法总结

[复制链接]
发表于 2017-8-8 14:56:22 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本文和大家分享的主要是jscss阻止元素被选中及清除选中相关内容,一起来看看吧,希望对大家学习web前端http://www.maiziedu.com/course/web/有所帮助。
  有时候,我们希望阻止用户选中我们指定区域的文字或内容。
  举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容。
  再举个栗子,制作轮播组件的时候,点击下一页,若点击的快的话,浏览器会识别为双击。
  双击的默认效果是选中整片区域,这时候轮播图组件就会被表示忧郁的蓝色幕布盖住,多忧桑啊~
- S% {+ @* q  p6 i& T: m9 W+ c3 S2 l3 {
                               
登录/注册后可看大图
. v, J8 ^1 v9 c# M" R, u7 E

8 ~& w( {2 w' l' j8 J
 你看,这妹子多赞啊,可是你一紧张就乱点下一张的话,就变成酱紫了:

' D7 A2 q0 G; X% _# K  Q                               
登录/注册后可看大图

* o! s' z9 I1 m% n3 y0 n2 H" m7 d5 z; t& P* R4 N9 L! _
不过别怕,给这个现代化浏览器说好了咱不要这种忧桑色调就可以了:
  .pretty-girl {
  -webkit-user-select: none;
  }
  可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请代码大王出山了。
  阻止选中
  有时候,我们需要禁止用户选中一些文本区域,这时候可以直接通过让 onselectstart 事件 return false 来实现。即在body标签中添加如下:
  <body onselectstart="return false">
  使用 JS 阻止整个网页的内容被选中
  document.body.onselectstart = function () {
  return false;
  };
  // document.body.onmousedown = function () {
  return false;
  }
  阻止特定区域的内容被选中
  var elem = document.getElementById('elemId');
  elem.onselectstart = function () {
  return false;
  };
  使用 CSS 控制样式阻止内容被选中
  仅支持IE10及以上的高版本浏览器。IE9 以下请使用 onselectstart="return false;" 的方式来实现。
  .unselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  /* 以下两个属性目前并未支持,写在这里为了减少风险 */
  -o-user-select: none;
  user-select: none;
  }
  user-select: auto; => 用户可以选中元素中的内容
  user-select: none; => 用户不可选中元素中的内容
  user-select: text; => 用户可以选中元素中的文字
  目前这个 user-select 兼容 Chrome 6+FirefoxIE 10+Opera 15+Safari 3.1+
  需要注意的是,这个 user-select 还带浏览器厂商前缀,意味着她们还是非标准的,将来可能会改变。在生产环境中要慎用。
  清除选中
  有时候用户选中文字进行复制后,我们使用手动的方式进行选中的清除。
  使用 JS 清除选中
  function clearSelections () {
  if (window.getSelector) {
  // 获取选中
  var selection = window.getSelection();
  // 清除选中
  selection.removeAllRanges();
  } else if (document.selection && document.selection.empty) {
  // 兼容 IE8 以下,但 IE9+ 以上同样可用
  document.selection.empty();
  // 或使用 clear() 方法
  // document.selection.clear();
  }
  }
  使用 CSS 清除选中
  不考虑低版本 IE 的情况下,我们简单给选中元素添加以上 .unselect 的样式即可。

6 k! G7 j' u9 H. k( [' E* E( |3 z
3 {; }0 F1 T8 ?5 K  c8 x( l
来源:SegmentFault

( B9 i& I6 J: M
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 16:15

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表