JS—触摸事件、手势事件
JS—触摸事件、手势事件
- dbclick
触屏设备不支持双击事件。双击浏览器窗口,会放大画面。
可以通过在head标签内加上这么一行:<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
可以实现,我们编写的页面不会随着用的手势而放大缩小。
关于meta
标签,我还没有研究过,罪过啊。 - mouse
在触屏上,我们单击一个元素,会相应的触发:mousemove
mousedown
mouseup
click
,所以当我们编写移动客户端界面时,可以为元素直接添加move事件,可以提高效率。
同时也会触发mouseover
与mouseout
,测试结果,我发现,只有当页面第一次刷新时,单击元素,参会触发mouseover事件。
随着触屏移动端设备的普及使用,W3C开始制定TouchEvent规范。
- 触摸事件
该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。具体来说有以下几个触摸事件。- touchstart
当手指放在屏幕上触发。 - touchmove
当手指在屏幕上滑动时,连续地触发。 - touchend
当手指从屏幕上离开时触发。 - touchcancel
当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。
【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三个。
由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用event.preventDefault()
,来阻止屏幕的默认滚动。
- touchstart
- 除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
- touches:表示当前跟踪的触摸操作的touch对象的数组。
当一个手指在触屏上时,event.touches.length=1
,
当两个手指在触屏上时,event.touches.length=2
,以此类推。 - targetTouches:特定于事件目标的touch对象数组。
因为touch事件是会冒泡的,所以利用这个属性指出目标对象。 - changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。
每个touch对象都包含下列几个属性: - clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
【如何使用呢?】EventUtil.addHandler(div,"touchstart",function(event){div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY; }); EventUtil.addHandler(div,"touchmove",function(event){ event.preventDefault(); div.innerHTML=event.touches[0].clientX; }); EventUtil.addHandler(div,"touchend",function(event){ div.innerHTML=event.changedTouches[0].clientY; });
使用clientX……时,必须要指明具体的touch对象,而不要直接指明数组。
event.touches[0]
在touchend
事件处理函数中,当该事件发生时,touches里面已经没有任何的touch对象了,此时,就要使用changeTouches集合。
- touches:表示当前跟踪的触摸操作的touch对象的数组。
- 手势事件
- gesturestart:当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发。
- gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
- gestureend:当任何一个手指从屏幕上面移开时触发。
【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。
- 触摸事件与手势事件之间的关系
1、当一个手指放在屏幕上时,会触发touchstart
事件,如果另一个手指又放在了屏幕上,则会触发gesturestart
事件,随后触发基于该手指的touchstart
事件。
2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange
事件,但只要有一个手指移开,则会触发gestureend
事件,紧接着又会触发toucheend
事件。 - 手势的专有属性
- rotation:表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从零开始。
- scale:表示两个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始,并随距离拉大而增长。
- dbclick
转载于:https://www.cnblogs.com/zhang11424/p/7106925.html
JS—触摸事件、手势事件相关推荐
- JavaScript触摸与手势事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // 手指在屏幕上移 ...
- 事件之触摸及手势事件
一 触摸事件 触发场景:当手指放在屏幕上.在屏幕上滑动或从屏幕移开 时,触摸事件即会触发 触摸事件: 事件 定义 touchstar 手指放到屏幕上时触发(即使有一个手指已经放在了屏幕上) touc ...
- 移动端手势事件 hammer.JS插件
今天我总结一下我以前用的一个移动端手势的插件 HAMMER.JS插件,很好用,而且提供的手势也很多.它没有任何依赖性,它很小,只有7.34 kB最小化+ gzip压缩!我只是简单的总结了一下他的用法, ...
- Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏键盘
前言 JetPack Compose (后续简称compose) release版已经出来了三四个月了,虽然没正式版之前也学过几次,但一直没有机会用,在加上api的变更,导致之前学的都忘完了,现在终于 ...
- vue 多点触控手势_移动端手势事件(多指操作)
在移动端开发中,现有的手势事件只有IOS上的浏览器支持,因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart.toucmove.touchend事件上进行改造升级,下面就介绍下升级改 ...
- JS手机触摸屏的事件用法详解
现在智能手机火爆了,我们都是触摸屏事的,那么我们以前js写法是无法满足一些要求了,下面我来给大家介绍几个JS手机触摸屏的事件用法 处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种 ...
- h5移动端vue手势插件,元素图片缩放、旋转拖拉拖拽手势事件
h5手势拖拽,缩放等功能插件vue-hand-mobile的使用 (1)插件介绍 (1-1)使用建议 (2)安装 (3)引入 (4)使用 (5)手势事件 轻拍 长按 拖动 快滑 两指缩放 两指旋转 ( ...
- IOS 定义手势监听器详解,利用 UIGestureRecognizer 进行捏合、旋转、平移、点击、长按手势事件响应
IOS中我们可以通过UITouch进行触摸事件监听,但是UITouch实现捏合.旋转.长按等手势事件监听非常麻烦.IOS中提供 UIGestureRecognizer 的子类帮我们简洁等实现捏合.旋转 ...
- Android开发笔记(四十五)手势事件
手势事件的流程 基本手势事件 基本的手势事件主要有如下三个方法: dispatchTouchEvent : 判断该事件是否需要下发.返回true表示需要下发给下级视图,返回false表示不需要下发(交 ...
最新文章
- 原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
- UEStudio使用技巧三则
- 【PC工具】Windows10开始菜单增强工具Stardock Start10
- frac函数_20个能够有效提高 Pandas数据分析效率的常用函数,附带解释和例子
- python居中填充_Python代码中 如何将字符串填充为指定长度并保持原字符串居中呢?...
- 【JVM】类的生命周期【转+整理】
- 二次型在一点的_EP型隐形车衣除胶剂的使用方法,为什么不建议用柏油清洗剂...
- spring 事务传播行为类型
- C++:空间坐标映射到球面坐标/全景图
- MSN Spaces
- 【20年9月】聊聊我的CISM备考过程,有经验有教训!
- 友谊的小船,说翻就翻
- VBS整人蓝屏代码(Windows 7 直接蓝屏,重启即可恢复,亲测有效!!)
- Hbase寻址(1)
- 黑苹果Yosemite 10.10.1懒人版完美安装及简单驱动设置
- 利用OpenCV读取大华网络摄像头
- homeassistant搭建_梅林搭建home-assistant
- python获取决策树的叶节点与深度
- 使用PuTTY连接远程Linux服务器
- php 归递删除,PHP递归删除目录几个代码实例
热门文章
- python合并表格_python合并表格sheets
- python解决xml文件论文-实例Python处理XML文件的方法
- android datepicker 监听,Android编程之DatePicker和TimePicke简单时间监听用法分析
- html圆如何找到垂直中心线,一种用于找中心线及圆心的装置的制作方法
- Java传参是字节还是字符串好_深入分析java传参
- java 绘制sin函数图像_第11讲 数学软件Mathematica内置函数的使用规则
- nginx动态php转发,Nginx 动态 upstreams 实现,nginxupstreams_PHP教程
- Spring面试基础题
- OSC源创会【放码过来】环节精彩回顾
- 解剖 RxJava 之过滤操作符