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

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

注意节流啊 ,看完下面就会觉得这个地方有用了

typescript 复制代码
let timer: any;
export const throttle = (func: Function, delay?: number) => {
  delay = delay || 600;
  if (!timer) {
    timer = setTimeout(() => {
      func();
      timer = null;
    }, delay);
  }
};

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,

);

主要代码块

typescript 复制代码
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,
);
相关推荐
hashiqimiya2 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕2 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
纯真时光2 小时前
Vue3中pinia状态管理库的使用(Composition API 风格)
前端
李李记2 小时前
Node.js 打包踩坑?NCC+PKG 从单文件到多平台可执行文件,解决 axios 缺失等 80% 问题
javascript
万少2 小时前
可可图片编辑 HarmonyOS(5)滤镜效果
前端
Yvonne爱编码3 小时前
后端编程开发路径:从入门到精通的系统性探索
java·前端·后端·python·sql·go
GIS之路4 小时前
GDAL 读取遥感影像数据
前端
猫林老师4 小时前
LazyForEach性能优化:解决长列表卡顿问题
性能优化
卓码软件测评4 小时前
第三方软件测评机构:MongoDB分片集群写入吞吐量与延迟第三方性能测评
数据库·mongodb·性能优化·压力测试
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化