js判断手指的上滑,下滑,左滑,右滑,事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动

js判断手指的上滑,下滑,左滑,右滑,事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动

pc端 判断鼠标滚轮向上滚动滑轮向下滚动

const scrollFunc = (e) => {
e = e || window.event;
let wheelDelta = e.wheelDelta ? e.wheelDelta : -e.detail * 50;
if (wheelDelta > 0) {
console.log(wheelDelta + ‘滑轮向上滚动’);
let dom = document.querySelector(‘.header-contanier’);
dom.style.display = ‘flex’;

let dom2 = document.querySelector('.navNull');
dom2.style.display = 'block';

}
if (wheelDelta < 0) {
console.log(wheelDelta + ‘滑轮向下滚动’);
let dom = document.querySelector(‘.header-contanier’);
let dom2 = document.querySelector(‘.navNull’);
dom.style.display = ‘none’;
dom2.style.display = ‘none’;
}
};
if (document.addEventListener) {
//火狐使用DOMMouseScroll绑定
document.addEventListener(‘DOMMouseScroll’, scrollFunc, false);
}
//其他浏览器直接绑定滚动事件
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome

移动端 js判断手指的上滑,下滑,左滑,右滑,事件监听

// touchstart: //手指放到屏幕上时触发
// touchmove: //手指在屏幕上滑动式触发
// touchend: //手指离开屏幕时触发
// touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
let startX: number = 0;
let startY: number = 0;
document.addEventListener(
‘touchstart’,
(e) => {
e.preventDefault();
// console.log(e);
startX = e.changedTouches[0].pageX;
startY = e.changedTouches[0].pageY;
},
false,
);
// document.addEventListener(
// ‘touchend’,
// (e) => {
// e.preventDefault();
// console.log(e);
// },
// false,
// );
document.addEventListener(
‘touchmove’,
(e) => {
// e.preventDefault();
let moveEndX = e.changedTouches[0].pageX;
let moveEndY = e.changedTouches[0].pageY;
let X = moveEndX - startX;
let Y = moveEndY - startY;

if (Math.abs(X) > Math.abs(Y) && X > 0) {console.log('right');
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {console.log('left');
} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {console.log('bottom');
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {console.log('top');
} else {alert('just touch');
}

},
false,
);

主要代码块


const scrollFunc = (e) => {e = e || window.event;let wheelDelta = e.wheelDelta ? e.wheelDelta : -e.detail * 50;if (wheelDelta > 0) {console.log(wheelDelta + '滑轮向上滚动');let dom = document.querySelector('.header-contanier');dom.style.display = 'flex';let dom2 = document.querySelector('.navNull');dom2.style.display = 'block';}if (wheelDelta < 0) {console.log(wheelDelta + '滑轮向下滚动');let dom = document.querySelector('.header-contanier');let dom2 = document.querySelector('.navNull');dom.style.display = 'none';dom2.style.display = 'none';}
};
if (document.addEventListener) {//火狐使用DOMMouseScroll绑定document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//其他浏览器直接绑定滚动事件
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome// touchstart:     //手指放到屏幕上时触发
// touchmove:      //手指在屏幕上滑动式触发
// touchend:    //手指离开屏幕时触发
// touchcancel:     //系统取消touch事件的时候触发,这个好像比较少用
let startX: number = 0;
let startY: number = 0;
document.addEventListener('touchstart',(e) => {e.preventDefault();// console.log(e);startX = e.changedTouches[0].pageX;startY = e.changedTouches[0].pageY;},false,
);
// document.addEventListener(
//   'touchend',
//   (e) => {
// e.preventDefault();
//     console.log(e);
//   },
//   false,
// );
document.addEventListener('touchmove',(e) => {// e.preventDefault();let moveEndX = e.changedTouches[0].pageX;let moveEndY = e.changedTouches[0].pageY;let X = moveEndX - startX;let Y = moveEndY - startY;if (Math.abs(X) > Math.abs(Y) && X > 0) {console.log('right');} else if (Math.abs(X) > Math.abs(Y) && X < 0) {console.log('left');} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {console.log('bottom');} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {console.log('top');} else {alert('just touch');}},false,
);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/42641.shtml

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

相关文章

Spring Clould 部署 - Docker

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; 初识Docker-什么是Docker&#xff08;P42&#xff0c;P43&#xff09; 微服务虽然具备各种各样的优势&#xff0c;但服务的拆分通用给部署带来了很大的麻烦。 分布式系统中&…

[强网杯 2019]随便注

输入1‘ 输入1“ 和输入1 一样说明是由‘闭合 然后我们尝试输入select 这里提示过滤了select&#xff0c;说明联合查询&#xff0c;报错注入&#xff0c;布尔,时间盲注就都不可以使用了。我们只剩下了 堆叠注入。 或者将select编码绕开也可以。 按sql注入测试1 or 11 # ​然…

Unity 物体的运动之跟随鼠标

你想让鼠标点击哪里&#xff0c;你的运动的对象就运动到哪里吗&#xff1f; Please follow me ! 首先&#xff0c;你要先添加一个Plane ,以及你的围墙&#xff0c;你的移动的物体 想要实现跟随鼠标移动&#xff0c;我们先创建一个脚本 using System.Collections; using Syst…

铜卡计混合法比热测试仪绝热量热计的高精度主动控制解决方案

摘要&#xff1a;在下落法比热容测试中绝热量热计的漏热是最主要误差源&#xff0c;为实现绝热量热计的低漏热要求&#xff0c;本文介绍了主动护热式等温绝热技术以及相应的解决方案。方案的核心一是采用循环水冷却金属圆筒给量热计和护热装置提供低温环境或恒定冷源&#xff0…

黑马点评-项目集成git及redis实现短信验证码登录

目录 IDEA集成git 传统session存在的问题 redis方案 业务流程 选用的数据结构 整体访问流程 发送短信验证码 获取校验验证码 配置登录拦截器 拦截器注册配置类 拦截器 用户状态刷新问题 刷新问题解决方案 IDEA集成git 远程仓库采用码云&#xff0c;创建好仓库&…

【O2O领域】Axure外卖订餐骑手端APP原型图,外卖配送原型设计图

作品概况 页面数量&#xff1a;共 110 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;外卖配送、生鲜配送 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本品为外卖订餐骑手端APP原型设计图&#x…

CentOS下MySQL的彻底卸载的几种方法

这里我为大家详细讲解下“CentOS下MySQL的彻底卸载的几种方法”的完整攻略。 一、关闭MySQL服务 在开始操作之前&#xff0c;需要先关闭MySQL服务。可以使用以下命令来关闭MySQL服务&#xff1a; systemctl stop mysqld 或者 service mysqld stop 二、使用yum命令卸载MySQL…

微前端 - qiankun

qiankun 是一个基于 single-spa 的微前端实现库&#xff0c;旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 本文主要记录下如何接入 qiankun 微前端。主应用使用 vue2&#xff0c;子应用使用 vue3、react。 一、主应用 主应用不限技术栈&#xff0c;只需要提…

数据结构之线性表的类型运用Linear Lists: 数组,栈,队列,链表

线性表 定义 一个最简单&#xff0c;最基本的数据结构。一个线性表由多个相同类型的元素穿在一次&#xff0c;并且每一个元素都一个前驱&#xff08;前一个元素&#xff09;和后继&#xff08;后一个元素&#xff09;。 线性表的类型 常见的类型&#xff1a;数组、栈、队列…

mysql、redis面试题

mysql 相关 1、数据库优化查询方法 外键、索引、联合查询、选择特定字段等等2、简述mysql和redis区别 redis&#xff1a; 内存型非关系数据库&#xff0c;数据保存在内存中&#xff0c;速度快mysql&#xff1a;关系型数据库&#xff0c;数据保存在磁盘中&#xff0c;检索的话&…

[Go版]算法通关村第十二关黄金——字符串冲刺题

目录 题目&#xff1a;最长公共前缀解法1&#xff1a;纵向对比-循环内套循环写法复杂度&#xff1a;时间复杂度 O ( n ∗ m ) O(n*m) O(n∗m)、空间复杂度 O ( 1 ) O(1) O(1)Go代码 解法2&#xff1a;横向对比-两两对比&#xff08;类似合并K个数组、合并K个链表&#xff09;复…

okhttp下载文件 Java下载文件 javaokhttp下载文件 下载文件 java下载 okhttp下载 okhttp

okhttp下载文件 Java下载文件 javaokhttp下载文件 下载文件 java下载 okhttp下载 okhttp 1、引入Maven1.1、okhttp发起请求官网Demo 2、下载文件3、扩充&#xff0c;读写 txt文件内容3.1读写内容 示例 http客户端 用的是 okhttp&#xff0c;也可以用 UrlConnetcion或者apache …

SD WebUI 扩展:prompt-all-in-one

sd-webui-prompt-all-in-one 是一个基于 Stable Diffusion WebUI 的扩展&#xff0c;旨在提高提示词/反向提示词输入框的使用体验。它拥有更直观、强大的输入界面功能&#xff0c;它提供了自动翻译、历史记录和收藏等功能&#xff0c;它支持多种语言&#xff0c;满足不同用户的…

[MAUI]在.NET MAUI中实现可拖拽排序列表

文章目录 创建可拖放控件创建绑定服务类拖拽&#xff08;Drag&#xff09;拖拽悬停&#xff0c;经过&#xff08;DragOver&#xff09;释放&#xff08;Drop&#xff09; 创建页面元素最终效果项目地址 .NET MAUI 中提供了拖放(drag-drop)手势识别器&#xff0c;允许用户通过拖…

Mysql驱动包下载

第一步&#xff1a;下载地址 MySQL :: Download Connector/J 第二步&#xff1a; 第三步&#xff1a; 第四步&#xff1a;解压 第五步&#xff1a;找到驱动包&#xff0c;放入项目使用即可

管理类联考——逻辑——真题篇——按知识分类——汇总篇——三、综合推理

文章目录 题-综合推理-分类1-排序真题&#xff08;2016-54-55&#xff09;-难度最高*****-综合推理-分类1-排序-画表排除法真题&#xff08;2016-54&#xff09;真题&#xff08;2016-55&#xff09;真题&#xff08;2019-36&#xff09;-综合推理-分类1-排序真题&#xff08;2…

【AIGC】 国内版聊天GPT

国内版聊天GPT 引言一、国内平台二、简单体验2.1 提问2.2 角色扮演2.3 总结画图 引言 ChatGPT是OpenAI发开的聊天程序&#xff0c;功能强大&#xff0c;可快速获取信息&#xff0c;节省用户时间和精力&#xff0c;提供个性化的服务。目前国产ChatGPT&#xff0c;比如文心一言&a…

OJ练习第151题——克隆图

克隆图 力扣链接&#xff1a;133. 克隆图 题目描述 给你无向 连通 图中一个节点的引用&#xff0c;请你返回该图的 深拷贝&#xff08;克隆&#xff09;。 示例 分析 对于一张图而言&#xff0c;它的深拷贝即构建一张与原图结构&#xff0c;值均一样的图&#xff0c;但是…

C++中的类型擦除技术

文章目录 一、C类型擦除Type Erasure技术1.虚函数2.模板和函数对象 二、任务队列1.基于特定类型的方式实现2.基于任意类型的方式实现 参考&#xff1a; 一、C类型擦除Type Erasure技术 C中的类型擦除&#xff08;Type Erasure&#xff09;是一种技术&#xff0c;用于隐藏具体类…

Electron基础篇

人生有些事,错过一时,就错过一世。 官网&#xff1a;简介 | Electron Electron-大多用来写桌面端软件 Electron介绍 Electront的核心组成是Chromium、Node.js以及内置的Native API&#xff0c;其中Chromium为Electron提供强大的UI能力&#xff0c;可以在不考虑兼容的情况下利…