移动端基础事件和交互

一:移动端基础事件
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手机端进行调试.

百度

四.防止误触事件

原理是:比方你对某刻元素设置了touchend事件,但是有时候我们会手指在这个元素上移动一下,没有想要触发这个事件,所以要进行判断,如果用户是移动则不触发这个事件.

百度
百度
百度
百度
百度

四:
tocuhEvent事件
touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表