html5支持2指触摸吗,HTML5移动端触摸事件

一、移动端事遇新是直朋能到分览件问题

1.click事件300ms延迟问题

2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如果有就会缩放,如果没有则是一个click事件。所以cilck操作会有卡顿感觉。

2.dblclick事件失效

由于双击缩放的存在,移动端的dblclick事件也失效了。

二、移动端触遇新是直朋能到分览摸事件

touchstart  在屏幕上按下手指时触发

touchmove     在屏幕上移动手指时触发

touchend        在屏幕上抬起手指时触发

touchcancel    触点由于某些原因被中断时触发。例如触摸时电话接入或者弹出框,都会中断触摸。一般会在这时暂停游戏、存档等操作。

三、TouchEvent事件对象

TouchEvent继承了UIEvent和Event,事件对象中包含很多内容,这里挑一些常用的:

touches 位于当前屏幕上所有触摸点列表(TouchList对象,包含若干个Touch对象)

targetTouches 起始于当前DOM元素,且没有结束的触摸点列表,是touches的一个严格子集(TouchList对象)

changedTouches 当前事件发生变化的触摸点列表(TouchList对象).对于touchstart,新增加的触点;对于touchmove,和上一次事件比较发生变化的触点(任何一个属性);对于touchend,离开屏幕的触点。

currentTarget 捕获层的DOM节点(即绑定事件的元素)

target 触发事件的DOM节点(实际触发的元素,target通常是位于currentTarget的子节点或其本身)

srcElement 与target本质相同,在早期的firfox中没有srcElement,IE中没有target

timeStamp 返回一个时间戳,从 epoch 开始的毫秒数。epoch 是一个事件参考点,在这里,它是客户机启动的时间。

type 当前事件的类型,如"touchstart"

altKey 布尔值,指明触摸事件触发时,键盘 alt 键是否被按下。

ctrlKey 布尔值,指明触摸事件触发时,键盘 ctrl 键是否被按下。

每个触摸点(Touch对象)包含了如下属性:

screenX / screenY 触摸点在屏幕中的位置

pageX / pageY 触摸点在整个文档中的位置

clientX / clientY 触摸点在可视区域中的位置

identifier 每个触摸点的唯一标识符

target 该触摸点最开始触摸的dom元素,即触发它的元素,无论触点移动到了哪里,该值都不会改变。

radiusX / radiusY 触摸点大概是一个椭圆,分别为水平轴半径/垂直轴半径(支持不好)

rotationAngle 触摸点旋转角度(顺时针)

force 压力大小,从0.0(没有压力)到1.0(最大压力)的浮点数

四、基于触摸事件的开比抖朋要插支一圈不者地发

以上的touch事件是HTML标准的内置事件,因为移动端的单双击事件问题和更丰富的用户需求,仅仅依赖原生事件来开发是不够方便的,因此出现了一些自定义事件的库。比如jQuery Mobile库和zeptojs库中的tap类事件(用于代替click事件)和swipe类事件(定义滑动的事件)。我们还可以使用原生事件来自定义更高级的手势,例如双指放大缩小等。

本文来源于网络:查看 >https://www.cnblogs.com/V587Chinese/p/10202080.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值