一:移动端基础事件
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="http://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="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a> <a href="http://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>