zoukankan      html  css  js  c++  java
  • [译]FastClick: native-like tapping for touch apps

    原文地址:http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/

    这篇文章是一篇老文了,现在才看到,真是落后啊。

    快速点击:像原生一样的触发app
     
    这篇博客最初是发表在Assanka的博客上的,后来12年1月的时候Assanka被金融时代收购了,成为了现在的FT实验室。
     
    12年8月的时候,把FastClick放到了GitHub上,将会一直使用GitHub来托管。
     
    利用JavaScript API 来实现触摸事件和手势是一个非常直观的尝试。随着Webkit浏览器对web标准更多的支持,Web apps 越来越接近原生的app.
    但是,你会发现,在越来越深入到Web app的开发过程中,当用户不再把你的app当作一个网站来看待的时候,会出现一些问题。
     
    95年和现在的触屏设备,受欢迎程序是不可同日而语的。JS的Dom 事件原本是用来反应鼠标的“点击”动作,每一个事件对应单一的一个动作。
    比如onClick事件。但是怎么样把他们转换到触摸屏设备呢?这是不容易的。
     
    把一个"tap"事件作为一个"click"事件是可行的方法。至少在IOS上,因为没有tap事件-onClick事件被用来代替它是没问题的。但是为了能够正确的处理多种触屏手势,比如“捏”的手势,两次触击的手势等,就需要做一些妥协。比如tap事件与click事件触发,两者之间就有一个300MS的延迟,会让你的app感觉很迟钝,虽然这不是技术上的问题。
     
    我们解决这个问题的方法是,在我们的app中跟踪所有的TouchStart事件,在接收到touchend事件的时候,触发一个click事件。最后,我们完善了快速点击的代码,把他变成了一个小而高效的库,叫做FastClick. 这个代码通过成百上千的用户测试,到目前为止已经比较健壮了。我们很想知道别人是如何解决类似的问题的,也想跟大家一起接受这个挑战并不断的提高我们自己的方式方法。所以我们开放了FastClick. 希望你能够试用它,并提出您的想法。
     
    使用FastClick的时候,在需要使用的层上,实例化它。我们使用document.body是因为希望所有的按钮和链接都获得快速点击。在事件监听的时候,‘click’事件的forwardedTouchEvent属性将被设置为true.
     
     
    如果在应用程序中,你使用按钮或者是ios风格的菜单,就能感受到明显的反应迟钝现象。下面用一个例子来说明,如何用FastClick来解决这个问题。
     
    <button class=”fastclick” onclick=”someHandler()”>Fast click</button>
    <button onclick=”someHandler()”>Slow click</button>
    <script type='text/javascript'>
    var button = document.querySelector(".fastclick");
    new FastClick(button);
    </script>
     
     
    在这个例子中,属性值为fastclick的按钮,当你的手指触摸到屏幕以后,就能立马进行事件处理。而其他的按钮,触摸以后,经了一个延迟的时间才有反应。
     
    不过,通过选择器选择的元素在接受代码合成的点击时,会有一些问题。所以如果把FastClick用到包含选择器的元素上,FastClick会忽略代码作用到选择器上的点击事件,只允许触发元素默认的点击事件。
     
    如果你想让在FastClick层上的其他元素接受非代码合成的点击的话,你需要两个class的帮助,一个是clickevent,一个是touchandclickevent. 对任何在FastClick层上可点击的元素,触碰元素将会触发不同的效果。
     
    (1)没有class值: 元素将只会接受来自FastClick的代码点击。默认的点击事件将会阻止掉。
    (2)class值是clickevent 的:元素只会接受默认的点击事件,忽略掉FastClick.
    (3)touchandclickevent : 元素 不仅会接受默认的点击事件,还会接受FastClick的事件,并且FastClick的事件会先被触发。
     
    <div class="fastclick">
      <button onclick="someHandler()">
        Will receive programmatic click event接受FastClick的点击
      </button>
      <button class="clickevent" onclick="someHandler()">
        Will receive non-programmatic click event只接受默认的点击事件
      </button>
      <button class="touchandclickevent" onclick="someHandler()">
        Will receive both click events两种点击都支持
      </button>
    </div>
    <script type='text/javascript'>
    var button = document.querySelector(".fastclick");
    new FastClick(button);
    </script>
     
     
    这个有用吗?试一下另外一个例子(http://labs.ft.com/wp-content/uploads/2011/08/fastclickdemo-input.html)。用点击事件来尝试触发input的focus事件。IOS上只会允许非程序的click触发。所以只有在class值为clickevent的时候,才管用
  • 相关阅读:
    支付宝移动支付开发详细教程服务端采用.net mvc webapi(C#)
    微信移动支付V3开发详细教程服务端采用.net mvc webapi(C#)
    CSS border-radius 圆角
    CSS hack大全&详解(什么是CSS hack)
    一小时搞定DIV+CSS布局-固定页面开度布局
    ASP.NET MVC3开发
    .net mvc页面UI之Jquery博客日历控件
    ASP.NET MVC3开发-数据库篇之CodeFisrt开发(一)
    ASP.NET MVC页面UI之联动下拉选择控件(省、市、县联动选择)
    Jquery文本框值改变事件(支持火狐、ie)
  • 原文地址:https://www.cnblogs.com/lilyimage/p/3568773.html
Copyright © 2011-2022 走看看