移动端事件 touch
移动端事件 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;
width: 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跳转，如果页面上有输入框，或者长按出现系统菜单的区域，建议写在另外一个页面中.
