关于Safari里quickOn绑定click事件闪屏问题的解决方案

最新推荐文章于 2020-10-22 17:04:03 发布

Jafeney

最新推荐文章于 2020-10-22 17:04:03 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： safari 解决方案移动设备 iphone 浏览器

本文链接：https://blog.youkuaiyun.com/u011413061/article/details/50172367

web前端专栏收录该内容

84 篇文章

订阅专栏

本文详细探讨了在iPhone Safari浏览器中，使用quickOn绑定click事件时出现的闪屏问题，分析了原因在于Safari浏览器对touchstart->touchend事件的特殊处理。提供了简单的代码解决方案，通过在事件处理函数中调用e.preventDefault()来避免闪屏现象，同时强调了此方法不会影响Safari浏览器的其他兼容性特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前段时间针对webApp里click事件300ms延迟的问题做了比较深入的研究，不过最近有用户反映在iPhone的Safari浏览器里点击页面会出现闪屏的问题（什么是闪屏呢？我这边简单解析是快速点击屏幕并放开之后屏幕会闪烁一下），这个问题偶尔一两次出现还好，但现在反映几乎每个用quickOn绑定click事件的图标点击都出现这个问题。

解释

quickOn绑定click事件的原理是在移动设备里通过touchstart->touchend事件模拟click事件，而Safari浏览器对这个事件定义了自己的默认行为（“闪屏”）？，这个猜测很快被肯定是正确的。因为在Android的浏览器和webview里并没有出现类似的问题，这又牵涉到浏览器兼容的大头了。不过但是既然是兼容问题，只要把Safari的特性屏蔽掉不就行了？

解决方案

下面是个代码片段：

$('#art-content').quickOn('click', '#btn-relative', function(e) {
    e.preventDefault();//没错，又是它！一行就够了
    //.....                 
});

这里还要注意一下，根据实际需求使用e.preventDefualt(),因为Safari的其他特性对用户体验友好性还是挺给力的。

好吧，就这么简单。 * _ * ，简直被自己蠢哭了