移動(dòng)端事件（一）

2019-11-08 00:25:47

字體：大中小

供稿：網(wǎng)友

移動(dòng)端的三大事件手指按下：ontouchstart手指移動(dòng)：ontouchmove手指抬起: ontouchend提示：在移動(dòng)端開(kāi)發(fā)時(shí)，瀏覽器的模擬器時(shí)好時(shí)壞，一般不用on 來(lái)綁定事件的函數(shù)，采用事件綁定的方式

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來(lái)綁定事件    oTest.addEventListener('touchstart',function(){        console.log('按下')    })    oTest.addEventListener('touchmove',function(){        console.log('移動(dòng)')    })    oTest.addEventListener('touchend',function(){        console.log('抬起')    })</script></body></html>2、事件（PC上問(wèn)題）
//PC上的事件比 移動(dòng)端事件慢，時(shí)間大約300ms左右    oTest.addEventListener('mouseup',function(){        console.log('鼠標(biāo)抬起')    })
oTest.addEventListener('touchstart',function(){        console.log('按下')    })
移動(dòng)端的點(diǎn)透：當(dāng)上層元素發(fā)生點(diǎn)擊的時(shí)候，下層元素也有點(diǎn)擊（焦點(diǎn)）特性，在300ms之后，如果上層元素消失或者隱藏，目標(biāo)點(diǎn)就會(huì)“漂移”到下層元素身上，就會(huì)觸發(fā)點(diǎn)擊行為。解決：1.下層不要使用有點(diǎn)擊（焦點(diǎn)）特性的元素。2.阻止pc事件。1.IOS10下設(shè)置meta禁止用戶縮放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用戶縮放）2.解決IOS10下溢出隱藏的問(wèn)題。3.禁止系統(tǒng)默認(rèn)的滾動(dòng)條、阻止橡皮筋效果4.禁止長(zhǎng)按選中文字、選中圖片、系統(tǒng)默認(rèn)菜單5.解決點(diǎn)透問(wèn)題6.也阻止了焦點(diǎn)元素的焦點(diǎn)行為(要解決正常使用：采用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">點(diǎn)我呀!</p><a href="https://www.google.com.hk/" id="a">點(diǎn)我呀！！！</a><div id="div1"></div><div id="div2"></div><input type="text" name="text" id="txt" value="" /><script type="text/Javascript">    /*        移動(dòng)端的點(diǎn)透：            當(dāng)上層元素發(fā)生點(diǎn)擊的時(shí)候，下層元素也有點(diǎn)擊（焦點(diǎn)）特性，            在300ms之后，如果上層元素消失或者隱藏，目標(biāo)點(diǎn)就會(huì)“漂移”到            下層元素身上，就會(huì)觸發(fā)點(diǎn)擊行為。                    解決：            1.下層不要使用有點(diǎn)擊（焦點(diǎn)）特性的元素。                        2.阻止pc事件。                        1.IOS10下設(shè)置meta禁止用戶縮放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用戶縮放）                        2.解決IOS10下溢出隱藏的問(wèn)題。                        3.禁止系統(tǒng)默認(rèn)的滾動(dòng)條、阻止橡皮筋效果                        4.禁止長(zhǎng)按選中文字、選中圖片、系統(tǒng)默認(rèn)菜單                        5.解決點(diǎn)透問(wèn)題                        6.也阻止了焦點(diǎn)元素的焦點(diǎn)行為(要正常使用：ev.stopPropagation()阻止冒泡)    */       var oDiv1 = document.getElementById('div1');   var oDiv2 = document.getElementById('div2');    var oA = document.getElementById('a');   var oTxt = document.getElementById('txt');       //阻止PC默認(rèn)事件   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>