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

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

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

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

// 覆盖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) { // Firefoxevent.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 });

四、完整代码示例

/*** 采用覆盖键、覆盖鼠标滑动事件;禁止通过	ctrl + +/- 和 	ctrl + 滚轮 对页面进行缩放* */
window.onload = function () {/*** 兼容电脑端的禁止通过	ctrl + +/- 和 	ctrl + 滚轮 对页面进行缩放* */const keyCodeMap = {// 91: true, // command61: 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) { // Firefoxevent.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.mzph.cn/web/54005.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Springboot+Vue的视频点播系统设计与实现登录 (含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统中…

Html CSS 布局,位置处理 居中 对齐

Html CSS 布局&#xff0c;位置处理 1、居中布局 1、div 让内部div居中对齐 html <div class"container"><div class"item">I am centered!</div> </div>style .container {border: 2px solid rgb(75, 70, 74);border-radius:…

基于Spring Boot的校园管理系统

目录 前言 功能设计 系统实现 获取源码 博主主页&#xff1a;百成Java 往期系列&#xff1a;Spring Boot、SSM、JavaWeb、python、小程序 前言 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自…

GPT与大模型行业落地实践探索

简介 本课程探讨GPT和大模型技术在行业中的实际应用和发展。课程将涵盖GPT的基础知识、原理、及其在行业中的应用案例&#xff0c;如财报分析和客服机器人。重点在于结合实际案例中的使用效果&#xff0c;讲解如何利用GPT的API开发企业级应用以及利用更高级的功能构造AI Agent。…

iOS 提取图片的主题色,并支持灵活提取

遇到一个需求&#xff0c;要提取图片中的色调&#xff0c;但还有一点特殊的需求&#xff0c;就是不是提取颜色最多的色调&#xff0c;也不是平均的色调&#xff0c;是图片中偏暗的色调 这就需要我们动态的调整我们提取的算法&#xff0c; 下面就看代码 dispatch_async(dispatch…

Prompt技巧总结和示例分享

"Prompt"&#xff08;提示&#xff09;在人工智能中通常指的是输入给模型的文本&#xff0c;用于引导模型生成预期的输出。在使用人工智能助手时&#xff0c;有效的提示技巧可以帮助你获得更准确和有用的回答。 以下是一些单轮对话提示时的技巧&#xff1a; 明确具体…

C++ 机器人相关面试点

C 机器人相关面试点 多功能聊天乐园 1. 功能实现&#xff1a; 用户管理&#xff1a;实现了用户注册与登录、头像上传与下载功能&#xff0c;用户密码通过OpenSSL加密&#xff0c;用户数据存储在MySQL数据库中&#xff0c;并通过XML文件进行本地持久化配置。 音乐播放与下载&a…

中国移动手撕代码 - 二叉搜索树删除节点

题目描述 已知二叉搜索树,数据不重复,提供 root 和 value, 遍历查找二叉树节点相等的值并删除,删除后剩余节点任然是二叉搜索树 Java 代码 class TreeNode {int val;TreeNode left;TreeNode right;TreeNode(int val)

react-native-Windows配置

一&#xff1a;官网&#xff1a; React Native for Windows macOS Build native Windows & macOS apps with Javascript and React 二&#xff1a;安装依赖 需要以管理员身份运行powershell,然后粘贴下面代码&#xff0c;注意&#xff1a;要安装淘宝镜像&#xff0c;要…

图解C#高级教程(一):委托

什么是委托 可以认为委托是持有一个或多个方法的对象。但它与对象不同&#xff0c;因为委托可以被执行。当执行委托时&#xff0c;委托会执行它所“持有”的方法。先看一个完整的使用示例。 // See https://aka.ms/new-console-template for more informationdelegate void M…

Skywalking告警配置

背景 skywalking 9.7.0&#xff0c;地址&#xff1a;Backend setup | Apache SkyWalking helm&#xff1a;skywalking-helm:4.5.0&#xff0c;地址&#xff1a;skywalking-helm/chart/skywalking/values.yaml at v4.5.0 首先来说一下为什么使用skywalking告警&#xff1f; …

创客匠人第二期“老蒋面对面”交流会圆满收官!

磅礴的大雨浇不灭奋斗的激情。9月24日&#xff0c;创客匠人第二期老蒋面对面—“创客匠人让知识变现不走弯路”内部大会在集美隆重举行。 本次内部大会旨在传递公司战略精神&#xff0c;深度探讨公司品牌传播的价值、方向和策略。这不仅是一次内部的交流与分享&#xff0c;更是…

[Day 79] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈在遊戲產業中的應用 區塊鏈技術已經開始在遊戲產業中引發革命&#xff0c;這項技術的分散化、透明性和安全性為遊戲世界帶來了許多創新應用。從虛擬物品的擁有權到去中心化市場、NFT遊戲資產交易&#xff0c;以及遊戲內經濟系統的構建&#xff0c;區塊鏈提供了強大的工具…

Spark 性能优化高频面试题及答案

目录 高频面试题及答案1. 如何通过调整内存管理来优化 Spark 性能?2. 如何通过数据持久化优化性能?3. 如何通过减少数据倾斜(Data Skew)问题来优化性能?4. 如何通过优化 Shuffle 操作提升性能?5. 如何通过广播变量(Broadcast Variables)优化性能?6. 如何通过序列化机制…

确保从IP池提取的IP是可用的对于数据抓取或其他网络活动至关重要。以下是一些确保IP可用性的有效方法:

1. IP验证 Ping测试&#xff1a;使用Ping命令来检查IP地址的响应情况。可用的IP地址应该能够成功响应Ping请求。 端口扫描&#xff1a;使用工具&#xff08;如Nmap&#xff09;扫描IP地址上的特定端口&#xff0c;以确认目标服务是否正常运行。例如&#xff0c;HTTP端口&#…

linux 内核代码学习(十)--Linux内核启动和文件系统

前面第九章介绍了linux内核文件系统从软盘启动的几种方式&#xff1a;1、从软盘直接启动的linux&#xff0c;软盘上包括内核及简单文件系统&#xff1b;2、从软盘直接启动的linux&#xff0c;将内核与文件系统分别放置在一张软盘上&#xff1b;3、Grub做为引导程序&#xff0c;…

银行管理系统

摘 要 伴随着信息技术与互联网技术的不断发展&#xff0c;人们进到了一个新的信息化时代&#xff0c;传统管理技术性没法高效率、容易地管理信息内容。为了实现时代的发展必须&#xff0c;提升管理高效率&#xff0c;各种各样管理管理体系应时而生&#xff0c;各个领域陆续进到…

了解针对基座大语言模型(类似 ChatGPT 的架构,Decoder-only)的重头预训练和微调训练

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 随着自然语言处理&#xff08;NLP&#xff09;技术的飞速进步&#xff0c;基于 Transformer 架构的大语言模型在众多任务中取得了显著成就。特别是 Decoder-only 架构&#xff0c;如 GPT 系列模型&…

【UI】Vue3 + Naive-ui 使用表格Data Table 以及分页页码显示不全问题解决

参考文章&#xff1a; Vue3 Naive-ui Data Table 分页页码显示不全 Naive UI之数据表格分页pagination 数据列表分页全部代码: <n-data-tableref"tableRef"striped:columns"columns":pagination"pagination":bordered"false":d…

JSON字符串转换成Java集合对象

在Java中&#xff0c;将JSON字符串转换成Java集合对象通常涉及到使用JSON处理库&#xff0c;如Jackson或Google的Gson。以下是使用这两个库的示例&#xff1a; 使用Jackson 添加Jackson依赖&#xff1a;如果你使用Maven&#xff0c;可以在pom.xml文件中添加以下依赖&#xff1…