vue2禁止浏览器使用右键

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

 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
    });

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,可以使用.prevent修饰符或监听事件的preventDefault()方法来屏蔽浏览器右键功能。 使用.prevent修饰符可以在HTML元素中阻止右键菜单的弹出。例如,可以在div元素上使用@contextmenu.prevent来阻止右键菜单的弹出。\[1\] 另一种方法是使用监听事件的preventDefault()方法。在Vue组件中,可以在监听事件的回调函数中使用event.preventDefault()来阻止右键菜单的弹出。例如,在div元素上监听@contextmenu事件,并在回调函数中使用event.preventDefault()来阻止右键菜单的弹出。\[2\] 此外,还可以通过其他方式屏蔽浏览器右键功能。例如,在Vue组件的created()钩子函数中,可以使用JavaScript代码来禁用右键菜单、禁用鼠标选中和禁止键盘F12键。具体的代码可以参考引用\[3\]中的示例。 总结起来,Vue中屏蔽浏览器右键功能的方法有使用.prevent修饰符、监听事件的preventDefault()方法以及使用JavaScript代码禁用右键菜单、禁用鼠标选中和禁止键盘F12键。 #### 引用[.reference_title] - *1* *2* [vue开发----关于阻止浏览器右键显示的方法](https://blog.csdn.net/qq_32107121/article/details/102930328)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue2禁止浏览器使用右键](https://blog.csdn.net/weixin_45292837/article/details/129587820)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值