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的时候,才管用
  • 相关阅读:
    codeforces 980A Links and Pearls
    zoj 3640 Help Me Escape
    sgu 495 Kids and Prizes
    poj 3071 Football
    hdu 3853 LOOPS
    hdu 4035 Maze
    hdu 4405 Aeroplane chess
    poj 2096 Collecting Bugs
    scu 4444 Travel
    zoj 3870 Team Formation
  • 原文地址:https://www.cnblogs.com/lilyimage/p/3568773.html
Copyright © 2011-2022 走看看