移动端事件

移动端的常见事件

touchstart 手指按下时触发
touchmove 手指移动
touchend 手指抬起

pc端的事件在移动端的问题

pc上的事件比移动端的事件略慢， 大概在300ms左右

oDiv.addEventListener('mouseup', function(){
    oP.innerHTML += '鼠标抬起 ';
}, false);

oDiv.addEventListener('touchend', function(){
    oP.innerHTML += '抬起 ';
}, false);

每次点击， 都是抬起 鼠标抬起

注意不要：移动手指， 移动之后就不会触发mouseup事件了

移动端的点透

span， 点击我

效果是点击div，手指抬起div消失

但是，当你点到div上span标签的位置，会触发span的click事件，div是覆盖了span标签的

span标签应该是点不到的， 如果将div的背景设为实色， 根本就看不到span标签

这就是移动端的点透问题:

当两个元素重叠时，当上层元素发生点击， 并且下层元素也有点击（焦点）特性，
如果在300ms之内， 上层元素消失， 目标点就会到下层元素， 触发下层元素的点击行为

所以如果你点击div300毫秒之后才抬起手指, 也不会触发span的click事件

原因就是因为pc上的事件比移动端的事件的300ms延迟

关于a标签，也会发生上面的点透问题

a标签

解决办法

1. 换成移动端事件

 oSpan.addEventListener('touchend', function(){
    alert(1);
}, false);

2. 阻止pc的事件

//猜想（pc的事件应该都算默认行为） 
document.addEventListener('touchstart', function(ev){
    ev.preventDefault();
}, false);

这是你注册的click事件， 永远都不会触发, a标签也不会跳转，

touch所有类型事件都会冒泡，如果阻止了touchstart的默认行为，后续的mousedown和click事件将不会触发

阻止了touchmove的默认行为，后续的mousemove事件将不会触发

如果阻止了touchend的默认行为，后续的mouseup和click事件将不会触发

同时解决了：

1. IOS10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用户缩放）

2. 解决IOS10下溢出隐藏的问题。

3. 禁止系统默认的滚动条、阻止橡皮筋效果

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

5. 解决点透问题

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

移动端的事件对象

touchs

当前位于屏幕上的所有手指的一个列表

targetTouches

位于当前DOM元素上的手指的一个列表

changedTouches

涉及当前事件的手指的一个列表

例子：轮播图

    
    
    




    

        ![](1.jpg)
        ![](2.jpg)
        ![](3.jpg)
        ![](4.jpg)
    

无缝滚动, 复制相同的img， 如果你本来有4张图片， 那么现在就有8张

如果点toucnstart到第一张， 迅速跳的第5张， 如果点toucnstart到第8张， 迅速跳的第4张，

wrap.addEventListener('touchstart', function(ev){
    ....
    num = Math.round(left/width);
    if(num==0){
        num = -length;
    }
    if(-num==2*length-1){
        num = -(length-1);
    }

    this.style.left = num*width + 'px';
    left = this.offsetLeft;
    ....
})