关于拖拽函数的几个问题点

# 具体遇到的问题
老师，您好，我想咨询一下其中一个代码为 var isTouchMove = false;视频中老师的解释为此代码为标志位

什么意思呢？我这边将关于标志位的代码删除以后，拖拽功能仍然是可以实现的，老师视频中的意思是，我们点击小图标的时候，虽然没有移动，但是触发了 function handleEnd(ev){}函数，怎么看出来的呢？

假设没有 var isTouchMove = false;这个标志位，如何看出function handleEnd(ev){}函数已经是被触发了呢？

# 报错信息的截图

function handleMove(ev) {

ev.preventDefault();

isTouchMove = true;

var touch = ev.changedTouches[0];

var diffPoint = {};

var movePoint = {

x: 0,

y: 0

};

diffPoint.x = touch.pageX - startPoint.x;

diffPoint.y = touch.pageY - startPoint.y;

if (options.x) {

movePoint.x = diffPoint.x + curPoint.x;

}

if (options.y) {

movePoint.y = diffPoint.y + curPoint.y;

}

move(el, movePoint.x, movePoint.y);

}

ev.preventDefault();preventDefault表示阻止事件的默认行为，ev是function 传入的参数，这里还是有些理解不了，阻止的是什么行为呢？阻止的是滚动条的默认行为，那么我在设定传入参数的时候，需不需要对ev进行一个定义呢？var ev=window.event || e; 我把这段代码加进去以后，好像也是不会报错的；老师，这个ev是不是属于行参？

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>2.4 单指拖拽--拖拽</title>
<style>
body {
height: 2000px;
}
.backtop {
position: fixed;
right: 20px;
bottom: 20px;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
color: #fff;
font-size: 30px;
-webkit-tap-highlight-color: transparent;
/*transform: translate3d(x, y, 0);*/
}
</style>
</head>
<body>
<a href="#" id="backtop" class="backtop">↑</a>
<script>
function drag(el, options) {
options.x = typeof options.x !== 'undefined' ? options.x : true;
options.y = typeof options.y !== 'undefined' ? options.y : false;
if (!options.x && !options.y) return;
var curPoint = {
x: 0,
y: 0
};
var startPoint = {};
var isTouchMove = false;
el.addEventListener('touchstart', handleStart, false);
el.addEventListener('touchmove', handleMove, false);
el.addEventListener('touchend', handleEnd, false);
function handleStart(ev) {
var touch = ev.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
}
function handleMove(ev) {
ev.preventDefault();
isTouchMove = true;
var touch = ev.changedTouches[0];
var diffPoint = {};
var movePoint = {
x: 0,
y: 0
};
diffPoint.x = touch.pageX - startPoint.x;
diffPoint.y = touch.pageY - startPoint.y;
if (options.x) {
movePoint.x = diffPoint.x + curPoint.x;
}
if (options.y) {
movePoint.y = diffPoint.y + curPoint.y;
}
move(el, movePoint.x, movePoint.y);
}
function handleEnd(ev) {
if (!isTouchMove) return;
var touch = ev.changedTouches[0];
curPoint.x += touch.pageX - startPoint.x;
curPoint.y += touch.pageY - startPoint.y;
isTouchMove = false;
}
function move(el, x, y) {
x = x || 0;
y = y || 0;
el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
}
}
</script>
<script>
var backtop = document.getElementById('backtop');
drag(backtop, {
x: true,
y: true
// y: true
});
</script>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示

键盘f11 2020-12-04

源自：移动端事件 2-6 单指拖拽--拖拽

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2020-12-04 18:05:00

同学你好，对于你的问题解答如下：

视频添加这个变量，主要是为了提升性能的，所以加不加这个变量，效果都是可以的显示。
因为点击图标的时候，表示触摸开始，那么当松开鼠标的时候，就表示触摸结束，可以在handleEnd事件中使用console.log()输出内容，方便测试。示例：
没有isTouchmove这个标识符，同样的可以在handleEnd函数中使用console.log()语句输出内容，测试是否触发了触摸结束事件。
老师在第一条中已经解答过了，添加isTouchMove主要是为了提升性能。因为当我们并没有拖动改变图标的位置，只是点击了一下，那么此时我们是不希望执行handleEnd中的代码，所以才添加了标识符。
示例：可以在判断语句的前后后面添加console.log语句，输出内容，方便查看结果
当添加了isTouchMove标识符时
点击图标，没有拖动直接松开后，确实触发了touchend事件，但是不会执行后面的代码。
当不添加isTouchMove标识符后
点击图标，没有拖动直接松开后，确实触发了touchend事件，同时也会执行后面的代码。
阻止的浏览器默认行为就是滚动条。
如果事件函数中传了参数ev，那么不需要再对ev定义了。
var ev=window.event || e; 把这段代码加进去以后不会报错，是因为window对象上默认有一个event属性，代表事件对象，它与传入的参数ev是一个意思，可以输出查看下：
是的，ev表示形参，名字可以自定义。