vue2禁止浏览器使用右键

原创已于 2023-03-17 09:53:45 修改

· 1.6k 阅读

7 ·

版权

文章标签：

#javascript #前端 #开发语言

于 2023-03-16 15:19:42 首次发布

该文章介绍了如何在大屏项目中优化用户交互，包括将页面设置为固定定位，防止右键菜单和鼠标选中，禁用F12键以防止开发者工具打开，以及禁止页面缩放。同时，还处理了鼠标滚轮和触摸事件，以阻止不必要的页面缩放和多点触控操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：一个大屏的项目，在大屏展示的时候触摸会跟随手指动，先把页面固定定位。

 position: fixed;
    top:0;
    left:0;

并且还会有右键提示

created() {
        this.$nextTick(() => {
        // 1.禁用右键菜单
        document.oncontextmenu = new Function("event.returnValue=false");
        // 2.禁用鼠标选中
        document.onselectstart = new Function("event.returnValue=false");
        // 3.禁止键盘F12键
        document.addEventListener("keydown", function (e) {
            if (e.key == "F12") {
            e.preventDefault(); // 如果按下键F12,阻止事件
        }
      });
    });
    },

页面禁止缩放：

在head标签里加上

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

鼠标滚轮事件：

    document.addEventListener('DOMMouseScroll', function (event) {
        event = event || window.event;
        // event.detail 属性和 mousewheel 事件的 wheelDelta 属性是一个意思
        if ((event.detail && event.ctrlKey)) {
            event.preventDefault();
        }
    }, {
        capture: false,
        passive: false
    });

禁用通过手指触摸缩放页面时需要touch(触摸)事件

    document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
            event.preventDefault()
        }
    },{
        capture: false,
        passive: false
    });

    document.addEventListener('touchmove', function(event) {
        event.preventDefault()
    },{
        capture: false,
        passive: false
    });