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