移动端事件

var div = document.getElementById('div1");
div.ontouchstart = function() {
　　alert(1);
}

div.addEventListener('touchstart', start)
function start () {
    alert(1);
}

注意：在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式

问题1：PC端的事件比移动端的事件略慢，大概在300ms左右，  所以一般用touchend，不用mouseup

问题2：移动端的点透

　　当上层元素发生点击的时候，下层元素也有点击（焦点）特性，

　　在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到下层元素身上，

　　就会触发点击行为。

解决：

　　1、下层不要使用有点击（焦点）特性的元素。

　　2、阻止PC的事件

document.addEventListener('touchstart', function(ev){
    ev.preventDefault();
}, { passive: false })

 好处 & 坏处：

（1）在IOS10下禁止用户缩放是不可行的（使用阻止PC事件就可以在IOS10下禁止用户缩放）

（2）解决IOS10下，溢出隐藏的问题 

（3）禁止系统默认的滚动条、阻止橡皮筋效果（页面回弹）

（4）禁止长按选中文字、选中图片、系统默认菜单

（5）解决点透问题

（6）也阻止了焦点元素的焦点行为（要正常使用，ev.stopPropagation() 阻止冒泡）

<input type="text" id="txt">

document.addEventListener('touchstart', function(ev){
    ev.preventDefault();
}, { passive: false })

txt.addEventListener('touchstart', function(ev){
    ev.stopPropagation();
})

移动端的事件对象

当给某个元素加上了事件绑定函数之后，事件函数默认的第一个参数就是事件对象

事件对象：

　　当用户在浏览器下触发了某个行为，事件对象会记录用户操作时一些细节信息。

（1）touches：当前位于*屏幕*上的的所有手指的一个列表

（2）targetTouches：位于当前DOM元素上的手指的一个列表

（3）changedTouches：涉及当前事件的手指的一个列表