• 移动端WEB开发,click,touch,tap事件浅析


    一、click 和 tap 比较

    两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。

    singleTap和doubleTap 分别代表单次点击和双次点击。

    二、关于tap的点透处理

    在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件。

    处理方式:

    (1)、

    github上有一个叫做fastclick的库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
    将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,如:

    1
    2
    3
    $(function(){
        newFastClick(document.body);
    })

    然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。
    当然,你也可以不在body上初始化它,而在某个dom上初始化,这样,只有这个dom和它的子元素才能享受“无延迟”的点击

    实践开发中发现,当元素绑定fastclick后,click响应速度比tap还要快一点点。哈哈

    (2)、为元素绑定touchend事件,并在内部加上e.preventDefault();

    $demo.on('touchend',function(e){//
    改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发
        $demo.hide()
        e.preventDefault();//
    阻止“默认行为”
    })

    三、touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听,让开发者可以获取用户触摸屏幕时的一些信息。

    其中包括:touchstart,touchmove,touchend,touchcancel 这四个事件

    touchstart,touchmove,touchend事件可以类比于mousedown,mouseover
    mouseup的触发。

    touchstart : 当手指触摸到屏幕会触发;

    touchmove : 当手指在屏幕上移动时,会触发;

    touchend : 当手指离开屏幕时,会触发;

    touchcancel许多人不知道它在什么时候会被触发而忽略它,其实当你的手指还没有离开屏幕时,有系统级的操作发生时就会触发touchcancel,例如alert和confirm弹框,又或者是android系统的功能弹窗。

    例如:

    这4个事件的触发顺序为:

    touchstart -> touchmove
    -> …… -> touchmove ->touchend

    但是单凭监听上面的单个事件,不足以满足我们去完成监听在触屏手机常见的一些手势操作,如双击、长按、左右滑动、缩放等手势操作。需要组合监听这些事件去封装对这类手势动作。

    其实市面上很多框架都针对手机浏览器封装了这些手势,例如jqmobile、zepto、jqtouch,不过悲剧发生了,对于某些android系统(我自己测试到的在android 4.0.x),touchmove和touchend事件不能被很好的触发,举例子说明下:

    比如手指在屏幕由上向下拖动页面时,理论上是会触发 一个 touchstart ,很多次 touchmove
    ,和最终的 touchend ,可是在android 4.0上,touchmove只被触发一次,触发时间和touchstart
    差不多,而touchend直接没有被触发。这是一个非常严重的bug,在google Issue已有不少人提出  http://code.google.com/p/android/issues/detail?id=19827

    暂时我只发现在android 4.0会有这个bug,据说 ios 3.x的版本也会有。

    而显然jqmobile、zepto等都没有意识到这个bug对监听实现带来的严重影响,所以在直接使用这些框架的event时,或多或少会出现兼容性问题!

  • 相关阅读:
    把特斯拉送上火星的程序员,马斯克!
    简练软考知识点整理-激励理论之成就动机理论
    简练软考知识点整理-激励理论之期望理论
    简练软考知识点整理-激励理论之XY理论
    简练软考知识点整理-激励理论之赫兹伯格双因素理论
    2017白领年终奖调查出炉,程序员扎心了!
    简练软考知识点整理-项目人力资源管理之马斯洛需要层次理论
    fsck获取文件的block信息和位置信息
    Snapshots常用命令
    Inceptor Parse error [Error 1110] line 102,24 SQL问题
  • 原文地址:https://www.cnblogs.com/rhett-web/p/4998192.html
Copyright © 2020-2023  润新知