移动端事件封装点击事件
作者：互联网
封装单击事件：
为什么要封装单击事件？
比如：
我们现在给同一个元素绑定了点击和移动两个事件
因为移动端的屏幕非常小，点击完以后，手在抬起来的时候，很容易造成一点的移动偏差
此时就很容易触发移动事件
我们需要进行一个判断，比如手在抬起来的时候，位置偏差范围多少的情况下视为单击离开
偏差多少的范围外，视为移动事件
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
<script>
var div1 = document.getElementsByClassName('div1')[0];
var div2 = document.getElementsByClassName('div2')[0];
// 把点击事件封装成对象的方法
var touchEvent = {
tab:function(el){
var end_x,end_y,start_x,start_y;
el.ontouchstart = function(e){
e =e||window.event;
// 获取按下动作的x值和y值
start_x = e.changedTouches[0].clientX;
start_y = e.changedTouches[0].clientY;
}
el.ontouchend = function(e){
e = e||window.event;
//获取抬起动作的x值和y值
end_x = e.changedTouches[0].clientX;
end_y = e.changedTouches[0].clientY;
if(Math.abs(end_x-start_x)<10 && Math.abs(end_y-start_y)<10){
alert('您调用了点击事件')
}else{
alert('您调用了移动事件');
}
}
}
}
touchEvent.tab(div1);
touchEvent.tab(div2);
</script>
标签：end,start,点击,事件,changedTouches,var,封装,移动 来源： https://blog.csdn.net/m0_49532408/article/details/122220835