• safari浏览器click事件要点击两次才有响应出现闪烁


    闪烁问题
    由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题。

    因为ios safari浏览器中对触摸事件的响应顺序是:

    ontouchstart -> ontouchmove -> ontouchend -> (300ms) onclick
    
    

    快速解决问题的方法:

    消除click默认样式
    通过讲click事件样式的alpha通道设置为0(透明),消除click事件的闪烁效果

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    

    消除click延时

    FastClick 是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到 touchend 事件的时候,会通过 DOM 自定义事件立即触发一个模拟 click 事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

    FastClick 非常实际地解决 300 毫秒点击延迟的问题,唯一的缺点可能也就是该脚本的文件尺寸 (尽管它只有10kb)。如果你连这10kb都接受不了的话,那么移动端类库 jQuery和zepto.js都支持tap事件来解决这个问题,尽管它们的响应速度比FastClick慢一些。

    iOS端click事件响应延时(300ms)的原因

    2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。 这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
    
    
    
    
    那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。
    
    之前人们刚刚接触移动端的页面,在欣喜的时候往往不会care这个300ms的延时问题,可是如今touch端界面如雨后春笋,用户对体验的要求也更高,这300ms带来的卡顿慢慢变得让人难以接受。
    

    fastclick

    详情参考文档

  • 相关阅读:
    判断添加用户名的唯一性
    显示用户登录用户名
    security安全框架,用户登录安全认证与退出
    mybatis分页助手分页
    javaWeb删除一条及多条数据
    javaWeb手动分页步骤
    自定义格式日期
    iOS开发UI篇—懒加载
    IOS-添加分段控件SegmentControl
    iOS设计模式——Category
  • 原文地址:https://www.cnblogs.com/userzf/p/10821478.html
Copyright © 2020-2023  润新知