首页 前端知识 vue实现浏览器禁止鼠标选中文字&禁止右键&禁止F12键

vue实现浏览器禁止鼠标选中文字&禁止右键&禁止F12键

2024-06-09 10:06:25 前端知识 前端哥 230 553 我要收藏

1. 禁止鼠标选中文字

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

2.禁止右键 

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

3. 禁止F12键

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

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

user-select: none;

5. 其他样式自己尝试吧

  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

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

<img src="图片地址"
	class="unselectable"
	draggable="false"
	oncontextmenu="return false;" />

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

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

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

<style>
	.unselectable {
	  -moz-user-select: -moz-none;
	  -khtml-user-select: none;
	  -webkit-user-select: none;
	  -o-user-select: none;
	  user-select: none;
	}
<style>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11675.html
标签
评论
发布的文章

【web前端】CSS浮动

2024-06-18 00:06:02

HTML CSS做的商城页面

2024-06-18 00:06:23

去空行小工具Html Javascript

2024-06-18 00:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!