javascript - 手机浏览器点击事件的穿透问题
ringa_lee
ringa_lee 2017-04-10 15:37:20
[JavaScript讨论组]

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

ringa_lee
ringa_lee

ringa_lee

全部回复(5)
高洛峰

http://segmentfault.com/q/1010000002942948

PHP中文网

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

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

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

巴扎黑

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

黄舟

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

$('#id').on('click', function() {
    console.log($(this)[0]);
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号