移动端的三大事件：
手指按下:
touchstart
手指移动:
touchmove
手指抬起
touchend
移动端点透问题的发生：
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<style>
#div1{
width:200px;
height: 200px;
background:red;
position: absolute;
top:0;
left:0;
opacity: .5;
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
<div id="div1"></div>
</body>
<script>
var div1=document.getelementbyid("div1");
div1.addeventlistener("touchstart",function(){
div1.style.display="none";
})
</script>
//当点击在div1身上的时候div1会消失，可以当点击a的时候，div1消失之后，300ms之后，又会发生跳转的现象。这就是点透。
注意：
在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定函数，要用事件绑定的方式（add.eventlistener）
不建议用电脑端事件的原因（如：mousedown)如下：
pc上的事件比移动端的事件略慢,大概是在300ms左右。
移动端的点透
含义：当上层元素发生点击的时候，下层元素也有点击（焦点）特性，在300ms之后，如果上层元素消失或隐藏，目标点就会“漂移”到下层元素身上，就会触发点击行为。
解决：
（1）下层不要使用有点击（焦点）特性的元素——不利于seo搜索
（2） 阻止pc的事件
即：document.addeventlistener("touchstart",function(){
ev.preventdefault();
})
这句话的好处：
ios10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在ios10下禁止用户缩放。解决ios10下溢出隐藏的问题。禁止系统默认的滚动条、阻止橡皮筋效果。可以禁止长按选中文字，选中图片、系统的菜单。解决点透问题。也阻止了焦点元素的焦点行为(要正常使用，需要使用ev.stoppropagation阻止冒泡)。
如何解决元素焦点行为被阻止？
txt.addeventlistener("touchstart",function(ev){
ev.stoppropagation();
})
若是想要跳转则使用：
a.addeventlistener("touchstart",function(){
window.loaction.href="http://www.baidu.com";
})
<style>
#div1{
width:200px;
height: 200px;
background:red;
}
</style>
<body>
<div id="div1"></div>
</body>
<script>
var div=document.getelementbyid("div1");
// div.ontouchstart=function(){
// alert(1);
// } on的方式绑定在浏览器模拟的时候常常会出现问题，通常不采用
div.addeventlistener("touchstart",start);
div.addeventlistener("touchmove",move);
div.addeventlistener("touchend",end);
function start(){
console.log("手指按下");
}
function move(){
console.log("移动");
}
function end(){
console.log("手指抬起");
}要用addeventlistener这种方式绑定
</script>
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
我要评论
网友评论