894
移動端基礎事件和交互(未完待續)
一:移動端基礎事件
1.touchstart 手指觸摸 == mousedown
2.touchend 手指抬起 == mouseup
3.touchmove 手指抬起 == mousmove
touch事件 在 chrome的模擬器下，部分版本 通過on的方式來添加事件無效
所以在移動端一般都使用如下方式
addEventListener("事件名",函數,冒泡或捕獲);
1. 不會存在前後覆蓋問題
2. 在chrome的模擬器下可以一直識別
//addEventListen可以同時對一個元素添加多個事件
element.addEventListener(
"touchstart",
function() {
console.log(1);
}
);
element.addEventListener(
"touchstart",
function() {
console.log(2);
}
);
//還可以定義函數,然後直接寫函數名
element.addEventListener(
"touchstart",
fn
);
function fn() {
console.log(3);
}
二:事件冒泡和捕獲
addEventListener("事件名",函數,false或true);
False 冒泡 ：點擊元素 他會把這個事件一直向上傳遞 從下向上傳遞
True 捕獲 ：從上向下傳遞
三:阻止默認事件和阻止冒泡
e.preventDefault();//阻止默認事件
e.stopPropagation();//阻止冒泡事件.
//阻止係統的默認事件
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
/*
e.preventDefault(); 阻止默認事件
阻止掉：document touchstart的默認事件，可以解決一下問題：
1. 阻止頁麵上的文字被選中 -- 可以通過阻止冒泡使某個元素上的文字被選中
2. 阻止頁麵上的係統菜單
隱患:
頁麵上的所有滾動條失效
*/
三.事件點透
需要大家把這個代碼複製到自己編譯器上,在穀歌中打開,f12手機端進行調試.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>無標題文檔</title> <style> #div { position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: rgba(204,255,0,.5); } </style> <script> //事件點透,兩個元素上的事件都沒被觸發 //阻止瀏覽器默認事件 //document.addEventListener( // "touchmove", // function(e) { // e.preventDefault();//阻止默認事件 // } //); window.onload = function () { var div = document.querySelector("#div"); /* PC端鼠標事件 在移動端也可以正常使用，但是注意 事件的執行 會有300ms的延遲 事件點透： 1. 在移動端 PC事件 有 300ms的延遲 2. 我們點擊了頁麵之後，瀏覽器會記錄點擊下去的坐標 3. 300ms後，在該坐標找到現在在這的元素 執行事件 解決辦法： 1. 阻止默認事件 (部分安卓機型不支持) 2. 不在移動端使用鼠標事件，不用a標簽做頁麵跳轉 */ div.addEventListener( "touchend", function (e) { //這裏不加入阻止默認事件,會發生點透事件,點div但是在百度漢字上,div消失後同時會觸發跳轉 //你可以嚐試把這個去掉看一下效果 e.preventDefault(); this.style.display = "none"; } ); }; </script> </head> <body> <a href="https://www.baidu.com">百度</a> <div id="div"></div> </body> </html>
四.防止誤觸事件
原理是:比方你對某刻元素設置了touchend事件,但是有時候我們會手指在這個元素上移動一下,沒有想要觸發這個事件,所以要進行判斷,如果用戶是移動則不觸發這個事件.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>無標題文檔</title> <style> a { display: block; width: 50px; height: 50px; background: red; color: #fff; margin: 20px; } </style> <script> document.addEventListener( "touchstart", function(e) { e.preventDefault(); } ); window.onload = function () { var a = document.querySelectorAll("a"); //對每一個a標簽添加touchmove事件, for(var i = 0; i < a.length; i++) { a[i].addEventListener( "touchmove", function() { this.isMove = true;//定義一個變量來標識用戶是否在元素上移動, } ); //防止誤觸原理是,防止移動結束時觸發此事件 a[i].addEventListener( "touchend", function() { //如果是移動就不會走if裏邊的事件. if(!this.isMove) { window.location.href = this.href; } this.isMove = false; } ); } }; </script> </head> <body> <a href="https://www.baidu.com">百度</a> <a href="https://www.baidu.com">百度</a> <a href="https://www.baidu.com">百度</a> <a href="https://www.baidu.com">百度</a> <a href="https://www.baidu.com">百度</a> </body> </html>
四:tocuhEvent事件
touches 當前屏幕上的手指列表
targetTouches 當前元素上的手指列表
changedTouches 觸發當前事件的手指列表
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>無標題文檔</title> <style> body { margin: 0; } #box { width: 200px; height: 200px; background: red; color: #fff; font-size: 30px; } </style> <script> document.addEventListener( "touchstart", function(e) { e.preventDefault(); } ); /* touches 當前屏幕上的手指列表 targetTouches 當前元素上的手指列表 changedTouches 觸發當前事件的手指列表 */ window.onload = function () { var box = document.querySelector("#box"); box.addEventListener( "touchend", function (e){ this.innerHTML = e.touches.length; } ); }; </script> </head> <body> <div id="box"></div> </body> </html>
最後更新：2017-11-05 11:34:57