移动端事件

三个事件

• touchstart 手指触摸 相当于PC端 mousedown
• touchend 手指抬起 相当于PC端 mouseup
• touchmove 手指滑动 相当于PC端 mousmove

注意： touch事件在chrome的模拟器下，部分版本通过on的方式来添加事件无效，这时候需要事件监听的方法 addEventListener("事件名",函数,冒泡或捕获)，它有以下优点：

1. 不会存在事件前后覆盖问题

2. 在chrome的模拟器下可以一直识别

写法如下：

box.addEventListener(    "touchstart",    function(ev) {        console.log(1);    });

阻止默认事件

box.addEventListener(    "touchstart",    function(ev) {        console.log(1);    });ev.preventDefault();  // 阻止默认事件

以上阻止掉：document touchstart的默认事件，可以解决一下问题：

1. 阻止页面上的文字被选中 -- 可以通过阻止冒泡使某个元素上的文字被选中

2. 阻止页面上的系统菜单

隐患: 页面上的所有滚动条失效

阻止 document的 touchstart 或者 touchmove，可以清除系统默认的回弹

事件点透

在移动端 PC事件（如mouseover） 有 300ms的延迟

1. 点击了页面之后，浏览器会记录点击下去的坐标

2. 300ms后，在该坐标找到现在在这的元素 执行事件

解决方法：

1. 阻止默认事件 (部分安卓机型不支持)

2. 不在移动端使用鼠标事件，不用a标签做页面跳转

防止误触

            
            
                                            百度        百度        百度        百度        百度    

touchEvent

1. touches 当前屏幕上的手指列表

2. targetTouches 当前元素上的手指列表

3. changedTouches 触发当前事件的手指列表

每个Touch对象包含的属性如下。

• clientX：触摸目标在视口中的x坐标。

• clientY：触摸目标在视口中的y坐标。

• identifier：标识触摸的唯一ID。

• pageX：触摸目标在页面中的x坐标。

• pageY：触摸目标在页面中的y坐标。

• screenX：触摸目标在屏幕中的x坐标。

• screenY：触摸目标在屏幕中的y坐标。

• target：触目的DOM节点目标。

• force: 压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数