一:移動端基礎事件
1.touchstart 手指觸摸 == mousedown
2.touchend 手指抬起 == mouseup
3.touchmove 手指抬起 == mousmove
touch事件 在 chrome的模擬器下炮叶，部分版本 通過on的方式來添加事件無效所以在移動端一般都使用如下方式addEventListener("事件名",函數,冒泡或捕獲);
- 不會存在前后覆蓋問題
- 在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();//阻止冒泡事件
//阻止系統(tǒng)的默認事件
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
e.preventDefault(); 阻止默認事件
阻止掉：document touchstart的默認事件，可以解決一下問題：
1. 阻止頁面上的文字被選中 -- 可以通過阻止冒泡使某個元素上的文字被選中
2. 阻止頁面上的系統(tǒng)菜單
隱患: 頁面上的所有滾動條失效
三.事件點透
需要大家把這個代碼復制到自己編譯器上,在谷歌中打開,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>
//事件點透,兩個元素上的事件都沒被觸發(fā)
//阻止瀏覽器默認事件
//document.addEventListener(
// "touchmove",
// function(e) {
// e.preventDefault();//阻止默認事件
// }
//);
window.onload = function () {
var div = document.querySelector("#div");
/*
PC端鼠標事件 在移動端也可以正常使用美澳，但是注意 事件的執(zhí)行 會有300ms的延遲
事件點透：
1. 在移動端 PC事件 有 300ms的延遲
2. 我們點擊了頁面之后陵究，瀏覽器會記錄點擊下去的坐標
3. 300ms后眠饮，在該坐標找到現在在這的元素 執(zhí)行事件
解決辦法：
1. 阻止默認事件 (部分安卓機型不支持)
2. 不在移動端使用鼠標事件，不用a標簽做頁面跳轉
*/
div.addEventListener(
"touchend",
function (e) {
//這里不加入阻止默認事件,會發(fā)生點透事件,點div但是在百度漢字上,div消失后同時會觸發(fā)跳轉
//你可以嘗試把這個去掉看一下效果
e.preventDefault();
this.style.display = "none";
}
);
};
</script>
</head>
<body>
<a >百度</a>
<div id="div"></div>
</body>
</html>
四.防止誤觸事件
原理是:比方你對某刻元素設置了touchend事件,但是有時候我們會手指在這個元素上移動一下,沒有想要觸發(fā)這個事件,所以要進行判斷,如果用戶是移動則不觸發(fā)這個事件.
<!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;//定義一個變量來標識用戶是否在元素上移動,
}
);
//防止誤觸原理是,防止移動結束時觸發(fā)此事件
a[i].addEventListener(
"touchend",
function() {
//如果是移動就不會走if里邊的事件.
if(!this.isMove) {
window.location.href = this.href;
}
this.isMove = false;
}
);
}
};
</script>
</head>
<body>
<a >百度</a>
<a >百度</a>
<a >百度</a>
<a >百度</a>
<a >百度</a>
</body>
</html>
四:
tocuhEvent事件
touches 當前屏幕上的手指列表
targetTouches 當前元素上的手指列表
changedTouches 觸發(fā)當前事件的手指列表
<!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 觸發(fā)當前事件的手指列表
*/
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>
