当前位置:   article > 正文

vue实现浏览器禁止鼠标选中文字&禁止右键&禁止F12键_vue所有页面禁止右键和f12

vue所有页面禁止右键和f12

1. 禁止鼠标选中文字

document.onselectstart = new Function("event.returnValue=false");

2.禁止右键 

document.oncontextmenu = new Function("event.returnValue=false");

3. 禁止F12键

  1. document.addEventListener("keydown", function (e) {
  2. if (e.key == "F12") {
  3. e.preventDefault(); // 如果按下键F12,阻止事件
  4. }
  5. });

4. 使用css样式实现禁用选中文字

user-select: none;

5. 其他样式自己尝试吧

  1. -ms-user-select: none;
  2. -khtml-user-select: none;
  3. -webkit-user-select: none;
  4. -moz-user-select: none;
  5. user-select: none;

6. img标签禁用选中、拖拽、右键

  1. <img src="图片地址"
  2. class="unselectable"
  3. draggable="false"
  4. oncontextmenu="return false;" />

class="unselectable"是添加一个类名为unselectable用于禁用鼠标选中;

draggable="false"用于禁用拖拽;

oncontextmenu="return false;"用于禁用鼠标右键

  1. <style>
  2. .unselectable {
  3. -moz-user-select: -moz-none;
  4. -khtml-user-select: none;
  5. -webkit-user-select: none;
  6. -o-user-select: none;
  7. user-select: none;
  8. }
  9. <style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/79385
推荐阅读