手机浏览器点击事件的穿透问题

Question

RT:手机页面的header部分使用position:fixed固定在顶部，
z-index设成了最外层，当内容区滚动到header下面时，点击header，会发生穿透。
也就是被header挡住的下面div上的事件被触发了，按理说被挡住了是不能点到下面div绑定的事件的。
有大神遇到过这种问题么，怎么解决的……

Answer 1

http://segmentfault.com/q/1010000002942948

Answer 2

header 部分可以加一下背景色试试，或者你的内容区域也有可能设置了Z-INDEX

Answer 3

$(".btn-cancel").on("touchstart",function(e){
        e.preventDefault(); //注意这句，加到你header的点击事件里面去
        ThisObj.find('option').eq(0).attr("selected","selected");
        $(".address-box").stop().animate({left:"100%"});
    })

我之前也遇到这样，点击上层会触发下层的点击

Answer 4

点击穿透这种问题在chrome浏览器上模拟是不会发生的。
但是部分安卓机上会有。解决办法就是使用fastclick，见：https://github.com/ftlabs/fastclick
可以一劳永逸。

Answer 5

使用 fastclisk 就可以解决，另外，引入 fastclick 就可以统一（PC和Mobile）使用 click 事件，不需要 tap 或者 touchstart 就可以避免延迟：

$('#id').on('click', function() {
    console.log($(this)[0]);
});