移动端事件 touch

touch事件有包括以下三个:

touchstart 手指在元素按下
touchmove 手指在元素按下后,手指在屏幕中移动
touchend 手指在元素按下后,手指在屏幕中抬起

注意:touch绑定方式

touch 事件在模拟器下不支持用on方式绑定事件;
在真机上on方式和事件侦听都没有问题
推荐都使用addEventListener()的方式添加事件

touch事件和mouse 事件的区别

可以对比记忆两者:

touchstart ---> mousedown
touchmove ---> mousemove
touchend ---> mouseup

touch事件和mouse事件的区别

touchstart 手指在元素上按下
touchmove 手指在元素上按下之后，在整个屏幕中移动
touchend 手指在元素上按下,然后手指从屏幕上抬起

其实,在touchmove和touchend依赖touchstart事件,就是 touchmove要向触发就必须先触发touchstart事件,touchend也就先触发了touchstart事件

其实,在移动端上mouse事件也是可以被监听到的,但是,在移动端上,mouse事件有300ms的延迟,也就是说,你点击了某一个元素一下(假设它已经绑定了mouse类的事件),300ms后才会触发这个元素的mouse事件.

在某一个像素上有两个以上的元素时( 通过定位来做到),当上面的元素添加了touch事件,下面的元素有click事件的时候,由于click有300ms的延迟,如果300ms之后下面的元素获得了点击,那么就会触发下面元素的click事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
	position: absolute;
	left: 0;
	top: 0;
	 200px;
	height: 200px;
	background: rgba(255, 0, 0, .5);
}	
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div id="box"></div>
<script type="text/javascript">

box.addEventListener('touchstart', function(e) {
	box.style.display = "none";
});	
//在box和a标签重合的地方点击,浏览器会跳转到百度
</script>	
</body>
</html>

事件点透

1. 当我们在元素上按下，首先立即执行元素的touch事件

2. 另外，浏览器会记录我们按下时的坐标，300ms之后，在该坐标上重新查找元素，如果元素有mouse事件，就把元素的mouse执行了.

a 标签会自动跳转就涉及到了浏览器的默认事件,在移动端,浏览器的默认事件需要记住的有:

a标签内置了click事件,在移动端有300ms延迟

解决事件点透: 阻止浏览器默认行为

document.addEventListener('touchstart', function(e) {
	e.preventDefault();
});

阻止默认行为的好处:

阻止图片被选中,导致拖拽卡顿
阻止事件点透
解决ios10之后，ios下的safari不在支持viewport的禁止缩放
解决ios10之后, body的overflow无效的问题

阻止默认行为的坏处:

滚动条不能滑动
阻止a标签跳转
阻止所有的鼠标事件(获取页面焦点,失去焦点)
阻止所有的系统菜单 (右键上下文菜单)
阻止所有的输入框输入
在移动端阻止鼠标事件执行
阻止页面被缩放
阻止页面的回弹效果
阻止a标签或者Input标签获得焦点
阻止系统默认滚动条

什么时候阻止默认行为呢?

当页面有滑屏或者拖拽时,就要阻止浏览器的默认行为

在某个元素上不想浏览器清除默认样式呢?

可以在当前元素的事件中,阻止冒泡

e.stopPropagation();

这样document就不会获得该事件,也就不会执行e.preventDefault()了

小结:

如果页面上有需要大面积滑屏的地方，最好还是清除默认行为，但是当前的这个页面上的滚动条，就需要我们自己去实现，另外页面上的a标签需要我们自己加js跳转，如果页面上有输入框，或者长按出现系统菜单的区域，建议写在另外一个页面中.