我把endhander写在里面和写在外面有什么好坏处？
<!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>
</head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div class="box" id="box"></div>
<script>
// 1, 扫到手势
const boxDOM = document.getElementById('box');
function swipe(DOM, cb) {
const start = {};
const threshold = {
time: 500,
distance: 100
}
DOM.addEventListener('touchstart', function (evt) {
evt.preventDefault();
}, false)
DOM.addEventListener('pointerdown', startHandler, false);
function startHandler(evt) {
start.x = evt.pageX;
start.y = evt.pageY;
start.time = new Date().getTime();
DOM.addEventListener('pointerup', endHandler, false);
DOM.addEventListener('pointercancel', endHandler, false);
function endHandler(evt) {
const delta = {};
let direction = '';
delta.time = new Date().getTime() - start.time;
delta.x = evt.pageX - start.x;
delta.y = evt.pageY - start.y;
if (delta.time > threshold.time
|| (Math.abs(delta.x) < threshold.distance)
&& (Math.abs(delta.y) < threshold.distance)) {
return;
} else {
if (Math.abs(delta.x) > Math.abs(delta.y)) {
if (delta.x > 0) {
direction = 'right'
} else {
direction = 'left'
}
} else {
if (delta.y > 0) {
direction = 'down'
} else {
direction = 'up'
}
}
cb.call(DOM, direction)
}
DOM.removeEventListener('pointerup', endHandler,false);
DOM.removeEventListener('pointercancel', endHandler,false);
}
}
}
swipe(boxDOM, function (direction) {
console.log(this);
console.log(direction);
})
</script>
</body>
</html>6
收起
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星