zoukankan      html  css  js  c++  java
  • 触屏设备触摸事件实验和记录

    1. 事件概述

    触屏设备的原始触摸事件有四个,【touchstart】【touchmove】【touchend】【touchcancle】,这里只讲前三个,因为最后一个是被动被打断时冒出的事件。

    2. touchstart

    用户把手指放到屏幕上的一刹那,触发的事件。

    3. touchmove

    用户用手指在屏幕上滑动,会持续触发这个事件。

    4. touchend

    用户的手指离开屏幕时触发的事件。

    5. 属性概述

    每一次触发事件,这个事件会 attach 一些 properties,就是附带一些额外信息给我们。这里主要实验 【touches】【targetTouches】【changedTouches】三个属性。这三个属性都是数组,从他们的名字的复数形式上就可以看出这个信息。

    6. 一个定义:触摸

    一个手指放在屏幕上,定义为一个触摸。这个触摸包含了这个手指的位置信息,等等。总之一个触摸基本上就可以看做屏幕上的一个手指。

    7. 属性之touches数组

    触发一次事件时,屏幕上所有的【触摸】会放在这个数组里。

    例子:用一根手指放在屏幕上,触发了一次【touchstart】事件,那么这个事件触发的时候,关联的【touches】数组就有一个元素,就是你这根手指头的相关信息。

    例子:你已经放了一根手指头在屏幕上,然后放第二根手指头,放第二根的时候,触发的【touchstart】事件,关联的【touches】数组就有两个元素了,就是这两根手指头的信息。

    8. 属性之targetTouches数组

    触发一次事件时,屏幕上的所有【触摸】里,跟这次事件关联的【触摸】在一个 dom node 里的那些【触摸】会放到 【targetTouches】数组里。至于 dom node,就是指 来源自一个dom 节点。比如说来源于一个<td></td>,或者来源于一个<div></div> 。

    例子:一个表格,两个td,  也就是两列,你有一根指头在第一个td里触摸着,然后再放一根指头到第二个td里,那么第二个指头引起的【touchstart】事件,所关联的【targetTouches】数组只有一个元素,那就是第二个指头自己的这次【触摸】。

    例子:一个表格,两个td,也就是两列,你有一根指头在第一个td里触摸着,然后再放一根指头到第一个td里,那么第二个指头引起的【touchstart】事件,所关联的【targetTouches】数组就有两个元素了,那就是第一根指头的【触摸】和第二个指头自己的【触摸】。

    9. 插讲:【触摸】对象的属性们

    上面所讲的数组里存放的都是【触摸】对象。那么【触摸】对象都有些什么属性呢。

    【https://developer.mozilla.org/en-US/docs/Web/API/Touch/target】,这个链接可以详细查看。

    这里我讲一个属性就是

    [触摸].target属性。

    这个属性是什么呢。

    就是你的指头第一次碰到屏幕的时候,指头所在的dom node,然后无论你的指头怎么移动,这个target属性都不会变了。

    10. 属性之changedTouches数组

    触发一次事件时,引发这次事件的【触摸】所组成的数组。

    例子iphone——1-【touchstart】:现在在iphone上测试【touchstart】事件,现在同时用两根手指放到屏幕上,那么会引起几次【touchstart】事件?答案是跟你这两个【触摸】对象的target有关。如果这两个手指的【触摸】的target一样,那么就会引发一次【touchstart】事件,自然,关联的【changedTouches】数组的元素数量就是2.

    例子iPhone——2-【touchmove】:现在在iPhone上测试【touchmove】事件,将两根手指放到屏幕上以后,然后同时滑动,那么这两根手指的移动会分别触发不同的【touchmove】事件还是会统一触发一个【touchmove】事件呢?答案也是跟这两个【触摸】对象的target有关。如果这两个手指的【触摸】的target一样,那么就会统一触发一个【touchmove】事件,自然,关联的【changedTouches】数组的元素就是2.

    例子iPhone——3-【touchend】:同理,同上。

    例子Android——1-【touchstart】:现在在Android上测试【touchstart】事件,现在同时用两根手指放到屏幕上,那么会引起几次【touchstart】事件?答案是,两次。也就是是说这两次关联的【changedTouches】数组的元素都是1.

    例子Android——2-【touchmove】:现在在Android上测试【touchmove】事件,将两根手指放到屏幕上以后,然后同时滑动,那么这两根手指的移动会分别触发不同的【touchmove】事件还是会统一触发一个【touchmove】事件呢?答案是会统一触发一次。而不会根据target的不同而分别区分。

    例子Android——3-【touchend】:会单独触发,而不会统一触发。

     

  • 相关阅读:
    Java多线程系列 JUC锁03 公平锁(一)
    Java多线程系列 JUC锁02 互斥锁ReentrantLock
    JDBC课程3--通过ResultSet执行查询操作
    JDBC课程2--实现Statement(用于执行SQL语句)--使用自定义的JDBCTools的工具类静态方法,包括insert/update/delete三合一
    JDBC_通过DriverManager获得数据库连接
    JDBC课程1-实现Driver接口连接mysql数据库、通用的数据库连接方法(使用文件jdbc.properties)
    [终章]进阶20-流程控制结构--if/case/while结构
    MySQL进阶19--函数的创建(举例)/设置mysql的创建函数的权限/查看(show)/删除(drop) / 举4个栗子
    MySQL进阶18- 存储过程- 创建语句-参数模式(in/out/inout-对应三个例子) -调用语法-delimiter 结束标记'$'- 删除/查看/修改-三个练习
    SQL进阶17-变量的声明/使用(输出)--全局变量/会话变量--用户变量/局部变量
  • 原文地址:https://www.cnblogs.com/onebook/p/5843283.html
Copyright © 2011-2022 走看看