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

时间:2021-11-06 02:01:02

前言

前段时间针对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的其他特性对用户体验友好性还是挺给力的。

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