js采用覆盖键、覆盖鼠标滑动事件实现禁止网页通过 ctrl + +/- 和 ctrl + 滚轮 对页面进行缩放

news/2024/9/30 12:19:59 标签: javascript, 开发语言

一、兼容电脑端的禁止通过 ctrl + +/- 和 ctrl + 滚轮 对页面进行缩放

javascript">const keyCodeMap = {
        // 91: true, // command
        61: true,
        107: true, // 数字键盘 +
        109: true, // 数字键盘 -
        173: true, // 火狐 - 号
        187: true, // +
        189: true, // -
    };

二、覆盖ctrl||command + ‘+’/‘-’

javascript">// 覆盖ctrl||command + ‘+’/‘-’
    document.onkeydown = function (event) {
        const e = event || window.event;
        const ctrlKey = e.ctrlKey || e.metaKey;
        if (ctrlKey && keyCodeMap[e.keyCode]) {
            e.preventDefault();
        } else if (e.detail) { // Firefox
            event.returnValue = false;
        }
    };

三、覆盖鼠标滑动

javascript">// 覆盖鼠标滑动
    document.body.addEventListener('wheel', (e) => {
        if (e.ctrlKey) {
            if (e.deltaY < 0) {
                e.preventDefault();
                return false;
            }
            if (e.deltaY > 0) {
                e.preventDefault();
                return false;
            }
        }
    }, { passive: false });

四、完整代码示例

javascript">/**
 * 采用覆盖键、覆盖鼠标滑动事件;禁止通过	ctrl + +/- 和 	ctrl + 滚轮 对页面进行缩放
 * */
window.onload = function () {
    /**
     * 兼容电脑端的禁止通过	ctrl + +/- 和 	ctrl + 滚轮 对页面进行缩放
     * */
    const keyCodeMap = {
        // 91: true, // command
        61: true,
        107: true, // 数字键盘 +
        109: true, // 数字键盘 -
        173: true, // 火狐 - 号
        187: true, // +
        189: true, // -
    };
    // 覆盖ctrl||command + ‘+’/‘-’
    document.onkeydown = function (event) {
        const e = event || window.event;
        const ctrlKey = e.ctrlKey || e.metaKey;
        if (ctrlKey && keyCodeMap[e.keyCode]) {
            e.preventDefault();
        } else if (e.detail) { // Firefox
            event.returnValue = false;
        }
    };
    // 覆盖鼠标滑动
    document.body.addEventListener('wheel', (e) => {
        if (e.ctrlKey) {
            if (e.deltaY < 0) {
                e.preventDefault();
                return false;
            }
            if (e.deltaY > 0) {
                e.preventDefault();
                return false;
            }
        }
    }, { passive: false });



    /**
     * 兼容iOS10以上Safari浏览器无法禁止缩放的解决方案
     * */
    // 阻止双击放大
    var lastTouchEnd = 0;
    document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    });
    document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);

    // 阻止双指放大
    document.addEventListener('gesturestart', function (event) {
        event.preventDefault();
    });
};

http://www.niftyadmin.cn/n/5685090.html

相关文章

H.264编解码工具 - Intel Quick Sync Video

一、简介 Intel Quick Sync Video是英特尔的一个硬件加速技术,用于提高视频编码和解码的性能。它是英特尔处理器中集成的多媒体引擎的一部分。通过利用硬件加速,Quick Sync Video可以大幅提高视频处理性能,同时减少对CPU的负载。 Quick Sync Video支持多种编解码器,包括H…

计算机毕业设计 C语言学习辅导网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

无人机之集群控制及应用

一、无人机集群控制 无人机集群控制是指通过先进的通信、导航和控制算法&#xff0c;实现多架无人机之间的协同、协调和高效的任务执行。其关键技术包括&#xff1a; 通信技术&#xff1a;实现无人机之间的实时数据传输和共享&#xff0c;确保集群控制的准确性和稳定性。 路径…

【大模型系列篇】动手部署实践国产文生图模型-腾讯混元DiT

首个中英双语DiT架构&#xff0c;混元-DiT&#xff0c;高性能细粒度中文理解-多分辨率扩散Transformer模型。 腾讯提出的混元DiT&#xff0c;是一个基于Diffusion transformer的文本到图像生成模型&#xff0c;此模型具有中英文细粒度理解能力。为了构建混元DiT&#xff0c;精心…

采购订单管理:如何驱动业务效率和增长

采购订单是一份具有法律约束力的文件&#xff0c;明确了买方在未来特定日期从供应商处购买商品或服务的意图。 该文件对于买卖双方均具有重要价值。对于买方而言&#xff0c;采购订单有助于其进行未来数月的财务规划&#xff0c;明确资金的支出时间点。对于供应商而言&#x…

鸿蒙开发(NEXT/API 12)【硬件(取消注册出行业务事件监听)】车载系统

取消注册出行业务事件监听。 接口说明 接口名描述[off] (type: ‘smartMobilityEvent’, smartMobilityTypes: SmartMobilityType[], callback?: Callback): void取消注册出行业务事件监听。 开发步骤 导入Car Kit模块。 import { smartMobilityCommon } from kit.CarKit;获…

揭秘福派斯牛肉高脂乳鸽猫粮的神奇魅力!

&#x1f43e; 亲爱的宠物家长们&#xff0c;今天我们来聊聊福派斯牛肉高脂乳鸽全价通用猫粮&#xff0c;让你的小宝贝在享受美味的同时&#xff0c;也能健康长肉哦&#xff01;&#x1f31f; 1️⃣ 美味诱惑&#xff0c;猫咪的味蕾盛宴 首先说说这款猫粮的口味&#xff0c;它精…

【从零开始实现stm32无刷电机FOC】【实践】【7.1/7 硬件设计】

目录 stm32电路磁编码器电路电机驱动电路电流采样电路电机选择本文示例硬件说明 为了承载和验证本文的FOC代码工程&#xff0c;本节设计了一个简易的三相无刷电机 硬件套件&#xff0c;主控采用非常常用的stm32f103c8t6单片机&#xff0c;电机编码器采用MT6701&#xff0c;电机…