请问老师，这是什么问题？正常吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: brown;
margin: 300px auto;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
const box = document.getElementById('box');
class SWIPE {
constructor(ele, start={}, isdefault = { time: 500, distance: 100 }) {
this.ele = ele;
this.start = start;
this.isdefault = isdefault;
}
// 开始点击
startdown() {
const ele = this.ele;
// console.log(ele);
ele.addEventListener('touchstart',(evt)=>{
evt.preventDefault();
})
ele.addEventListener('pointerdown',(evt)=>{
this.pressdown(evt);
},false);
}
// 点击后其他事件
pressdown(evt) {
this.start.time=new Date().getTime();
this.start.x=evt.pageX;
this.start.y=evt.pageY;
// console.log(this.start);
document.addEventListener('pointerup',(evt)=>{
this.endHandler(evt)
},false);
document.addEventListener('pointercancel',(evt)=>{
this.endHandler(evt)
},false);
}
//endHandler()结束事件
endHandler(evt){
const differ={};
let direction='';
differ.time=new Date().getTime()-this.start.time;
differ.x=evt.pageX-this.start.x;
differ.y=evt.pageY-this.start.y;
// console.log(differ.time,Math.abs(differ.x),Math.abs(differ.y));
document.removeEventListener('pointerup',(evt)=>{
this.endHandler(evt)
},false);
document.removeEventListener('pointercancel',(evt)=>{
this.endHandler(evt)
},false);
this.isSwipe(differ,direction)
}
//判断是否是扫动手势
isSwipe(differ,direction){
const isdefault= this.isdefault;
if(differ.time>isdefault.time||(Math.abs(differ.x)<isdefault.distance&&
Math.abs(differ.y)<isdefault.distance)){
return;
}else{
//判断方向
if(Math.abs(differ.x)>=Math.abs(differ.y)){
if(differ.x>0){
direction='→';
}else{
direction='←';
}
}else{
if(differ.y>0){
direction='↓';
}else{
direction='↑';
}
}
}
console.log(direction);
}
}
const p = new SWIPE(box);
p.startdown();
</script>
</html>你好老师，左右上下扫和45度角去扫会触发很多次这是为什么？是不是因为鼠标按下后里面的方法一直在触发的缘故？怎么处理呢？是不是跟轮播图点击添加节流锁一个原理？
正常扫如图：
45度往角上扫：
8
收起
正在回答
1回答
同学你好，这是由于pointerup事件处理函数没有被成功清理造成的。由于上一次的pointerup等事件没被清理，导致事件重复添加，因此打印了多个结果：
可以使用一个特殊的关键字bind，辅助我们清除重复事件。bind用来改变函数中的this指向：
具体如下：
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星