js判斷手指的上滑，下滑，左滑，右滑，事件監(jiān)聽 和 判斷鼠標(biāo)滾輪向上滾動(dòng)滑輪向下滾動(dòng)

注意節(jié)流啊 ，看完下面就會(huì)覺(jué)得這個(gè)地方有用了

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

pc端 判斷鼠標(biāo)滾輪向上滾動(dòng)滑輪向下滾動(dòng)

const scrollFunc = (e) => {
e = e || window.event;
let wheelDelta = e.wheelDelta ? e.wheelDelta : -e.detail * 50;
if (wheelDelta > 0) {
console.log(wheelDelta + ‘滑輪向上滾動(dòng)’);
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 + ‘滑輪向下滾動(dòng)’);
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);
}
//其他瀏覽器直接綁定滾動(dòng)事件
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome

移動(dòng)端 js判斷手指的上滑，下滑，左滑，右滑，事件監(jiān)聽

// touchstart: //手指放到屏幕上時(shí)觸發(fā)
// touchmove: //手指在屏幕上滑動(dòng)式觸發(fā)
// touchend: //手指離開屏幕時(shí)觸發(fā)
// touchcancel: //系統(tǒng)取消touch事件的時(shí)候觸發(fā)，這個(gè)好像比較少用
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,
);文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-662343.html

主要代碼塊

const scrollFunc = (e) => {
  e = e || window.event;
  let wheelDelta = e.wheelDelta ? e.wheelDelta : -e.detail * 50;
  if (wheelDelta > 0) {
    console.log(wheelDelta + '滑輪向上滾動(dòng)');
    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 + '滑輪向下滾動(dòng)');
    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);
}
//其他瀏覽器直接綁定滾動(dòng)事件
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome

// touchstart:     //手指放到屏幕上時(shí)觸發(fā)
// touchmove:      //手指在屏幕上滑動(dòng)式觸發(fā)
// touchend:    //手指離開屏幕時(shí)觸發(fā)
// touchcancel:     //系統(tǒng)取消touch事件的時(shí)候觸發(fā)，這個(gè)好像比較少用
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,
);

到了這里，關(guān)于js判斷手指的上滑，下滑，左滑，右滑，事件監(jiān)聽 和 判斷鼠標(biāo)滾輪向上滾動(dòng)滑輪向下滾動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！