移动端踩过的坑

(-大公司里怎样开发和部署前端代码)[https://github.com/fouber/blog/issues/6]

1. ios上对fixed定位不完全支持--
   解决办法：用absolute定位+局部div滚动来实现固定定位。

2. 移动端h5页面touch事件与点击穿透问题

   pc端上面相应的事件都是通过鼠标来实现的：包括：mousedown,mouseup,mousemove,click
   拆解为： mousedown -> click-> mouseup

移动端触摸事件分为：
拆解为：touchstart -> touchmove -> touchend

手机上也可以响应mouse事件，以下是统计手机端与pc端响应事件的时间长短

上述统计可以看出 手机上的click事件相比pc端 有300毫秒左右的延迟

用Zepto的时候，我们做PC页面时绑定click，相应地手机页面就绑定tap。但原生的touch事件本身是没有tap的，js库里提供的tap事件都是模拟出来的。
（手机上响应300毫秒延迟是为了等待用户是否进行了双击事件，如果没有双击则进行单击事件的触发）

3. 点击穿透的场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="container">
    <div id="underLayer">底层元素</div>
    <div id="popupLayer">
        <div class="layer-title">弹出层</div>
        <div class="layer-action">
            <button class="btn" id="closePopup">关闭</button>
        </div>
    </div>
</div>
<div id="bgMask"></div>

$('#closePopup').on('tap', function(e){
    $('#popupLayer').hide();
    $('#bgMask').hide();
});

$('#underLayer').on('click', function(){
    alert('underLayer clicked');
});

效果图

我们在遮罩层的下层写了div，并且绑定了事件
当我们点击关闭按钮的时候，tap事件触发遮罩层隐藏，由于遮罩层隐藏，300毫秒之后click事件触发滞后性（300ms）

穿透的解决办法

1. 由于 click 事件的滞后性，在这段时间内原来点击的元素消失了，于是便“穿透”了。因此我们顺着这个思路就想到，可以给元素的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。

2. pointer-events

1
2
3
4
5
6
7
8
9
10

$('#closePopup').on('tap', function(e){
    $('#popupLayer').hide();
    $('#bgMask').hide();

    $('#underLayer').css('pointer-events', 'none');

    setTimeout(function(){
        $('#underLayer').css('pointer-events', 'auto');
    }, 400);
});

3. fastclick

   1	FastClick.attach(document.body);

• ← 上一篇
• 下一篇 →