• JS


    移动设备的大部分交互都是通过触摸touch来实现的,是因为移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互。对于触屏的交互式网站、游戏,触摸事件是相当重要的。Apple在IOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。

    简单介绍一下IOS上的浏览器(主要Safari)所支持的多触式事件模型,然后将触控(Touch)这种简单的动作升级为手势(Gestrue)。

    IOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在IOS上会有半秒左右的延迟,原因是IOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以,在IOS上,应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级 的Gesture事件,能让你的网页交互起来像native应用一样。

    Touch事件是在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。

    Gesture事件则是对touch事件的更高级的封装,主要处理手指slide、rotate、scale等动作。

    1、移动设备(触屏)常用touch处理事件:

    touchstart:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
    touchmove:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
    touchend:当手指从屏幕上拿起的时候触发。
    touchcancel:当系统停止(取消)跟踪touch触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明(不详)。

    上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)等。

    2、每个触摸事件都包括了三个触摸列表(即用于跟踪触摸的属性),每个列表里包含了对应的一系列触摸点(用来实现多点触控):

    touches:当前位于屏幕上的所有手指的一个列表(表示当前跟踪的触摸操作的touch对象的数组)
    targetTouches:位于当前DOM元素上的手指的一个列表(特定于事件目标的Touch对象的数组)
    changeTouches:涉及当前事件的手指的一个列表(表示自上次触摸以来发生了什么改变的Touch对象的数组)

    3、每个触摸点由包含了如下触摸信息(常用重要属性): 

    通过touch event handler的event对象取到(一般是通过event.changedTouches属性)。
    --- pageX/pageY/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离>相对页面,client不包含滚动距离>相对视口>>触摸点相对于浏览器窗口viewport的位置 ,screen以屏幕为基准>相对屏幕)。 
    --- target:触目的DOM节点目标。(DOM元素,是动作所针对的目标)
    --- identifier:标识触摸的唯一ID。(唯一标识触摸会话(touch session)中的当前手指) 
    --- radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。(未测试)

    最后,来看下几个例子:

    demo1:

    demo2:

    demo3:

    转自: 

    html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove 

    WEB前端开发(www.css119.com)–移动互联网终端的touch事件,touchstart, touchend, touchmove

    移动端html touch事件  

     

  • 相关阅读:
    [转载]IntelliJ IDEA常用设置
    sql server字段合并逗号隔开
    sql server字段合并逗号隔开
    [转载]Hana 学习资源
    SQL Server数据库实现异地备份
    SQL Server数据库实现异地备份
    SQL Server blocked access to procedure 'sys.xp_cmdshell'
    调用另一个进程,createprocess返回值正确,但被调进程连入口函数都没进入。
    需求做完后,需要拉相关人员确认下结果
    exe崩溃用windbgattach后有宝贵现场,可看程序退出线程等,千万不要清屏
  • 原文地址:https://www.cnblogs.com/libinblog/p/4410175.html
Copyright © 2020-2023  润新知