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】:会单独触发,而不会统一触发。

     

  • 相关阅读:
    Pills
    项链
    IIS7.5 关于ASP连接ACCESS数据库超时问题
    清明
    The New Beginning
    新的开始
    Mysql中文乱码以及导出为sql语句和Excel问题解决
    Spring学习笔记01. 入门知识,IoC/DI
    selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PAT
    Django框架 python3.7+django2.2 报错:AttributeError: ‘str’ object has no attribute ‘decode’解决办法
  • 原文地址:https://www.cnblogs.com/onebook/p/5843283.html
Copyright © 2011-2022 走看看