移动端的三大事件
手指按下:ontouchstart
手指移动:ontouchmove
手指抬起: ontouchend
提示:在移动端开发时,浏览器的模拟器时好时坏,一般不用on 来绑定事件的函数,采用事件绑定的方式
1、事件演示
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title></title>
<style type="text/css">
body{
margin:0;
}
#test{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
var oTest = document.getElementById('test');
//on 绑定事件
/*oTest.ontouchstart = function (){
alert(1);
}
*/
//用addEventListener来绑定事件
oTest.addEventListener('touchstart',function(){
console.log('按下')
})
oTest.addEventListener('touchmove',function(){
console.log('移动')
})
oTest.addEventListener('touchend',function(){
console.log('抬起')
})
</script>
</body>
</html>
2、事件(PC上问题)
//PC上的事件比 移动端事件慢,时间大约300ms左右
oTest.addEventListener('mouseup',function(){
console.log('鼠标抬起')
})
oTest.addEventListener('touchstart',function(){
console.log('按下')
})
移动端的点透:
当上层元素发生点击的时候,下层元素也有点击(焦点)特性,
在300ms之后,如果上层元素消失或者隐藏,目标点就会“漂移”到
下层元素身上,就会触发点击行为。
解决:
1.下层不要使用有点击(焦点)特性的元素。
2.阻止pc事件。
1.IOS10下设置meta禁止用户缩放是不可行的。(使用阻止pc事件就可以在IOS10下禁止用户缩放)
2.解决IOS10下溢出隐藏的问题。
3.禁止系统默认的滚动条、阻止橡皮筋效果
4.禁止长按选中文字、选中图片、系统默认菜单
5.解决点透问题
6.也阻止了焦点元素的焦点行为(要解决正常使用:采用ev.stopPropagation()阻止冒泡)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title>test事件</title>
<style>
body,html{
width:100%;
overflow:hidden;
}
#div1{
width:200px;
height: 200px;
background: red;
position: absolute;
top:0;
left:0;
opacity: .5;
}
#div2{
width:3000px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<p id="p">点我呀!</p>
<a href="https://www.google.com.hk/" id="a">点我呀!!!</a>
<div id="div1"></div>
<div id="div2"></div>
<input type="text" name="text" id="txt" value="" />
<script type="text/javascript">
/*
移动端的点透:
当上层元素发生点击的时候,下层元素也有点击(焦点)特性,
在300ms之后,如果上层元素消失或者隐藏,目标点就会“漂移”到
下层元素身上,就会触发点击行为。
解决:
1.下层不要使用有点击(焦点)特性的元素。
2.阻止pc事件。
1.IOS10下设置meta禁止用户缩放是不可行的。(使用阻止pc事件就可以在IOS10下禁止用户缩放)
2.解决IOS10下溢出隐藏的问题。
3.禁止系统默认的滚动条、阻止橡皮筋效果
4.禁止长按选中文字、选中图片、系统默认菜单
5.解决点透问题
6.也阻止了焦点元素的焦点行为(要正常使用:ev.stopPropagation()阻止冒泡)
*/
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oA = document.getElementById('a');
var oTxt = document.getElementById('txt');
//阻止PC默认事件
document.addEventListener('touchstart',function(ev){
ev.preventDefault();
})
oA.addEventListener('touchstart',function(){
window.location.href="https://www.google.com.hk/";
})
oTxt.addEventListener('touchstart',function(ev){
ev.stopPropagation();
})
oDiv1.addEventListener('touchend',endFn);
function endFn(){
this.style.display="none";
}
</script>
</body>
</html>