移动端事件（一）

2019-11-08 00:25:47

字体：大中小

来源：转载

供稿：网友

移动端的三大事件手指按下：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>