• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JS触摸事件、手势事件详解

JS触摸事件、手势事件详解

作者:Miss____Du 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Miss____Du通过本文主要向大家介绍了js手势事件,js 手势,js手势插件,js 手势放大图片,node.js开发实战详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

触屏已经是我们身边电子设备的常态了。触摸事件当然也是随着触屏的出现,用户使用最多的事件啦!
难道使用触屏事件后,其他原来的鼠标事件就都不能用啦?当然不是,只不过不是那么好用啊。

针对鼠标事件,有哪些不适应?

dbclick

触屏设备不支持双击事件。双击浏览器窗口,会放大画面。

可以通过在head标签内加上这么一行:

<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</div>

可以实现,我们编写的页面不会随着用的手势而放大缩小。

关于meta标签,我还没有研究过,罪过啊。

mouse

在触屏上,我们单击一个元素,会相应的触发:mousemove mousedown mouseup click,所以当我们编写移动客户端界面时,可以为元素直接添加move事件,可以提高效率。

同时也会触发mouseover与mouseout,测试结果,我发现,只有当页面第一次刷新时,单击元素,参会触发mouseover事件。

随着触屏移动端设备的普及使用,W3C开始制定TouchEvent规范。

触摸事件

该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。具体来说有以下几个触摸事件。
1、touchstart

当手指放在屏幕上触发。

2、touchmove

当手指在屏幕上滑动时,连续地触发。

3、touchend

当手指从屏幕上离开时触发。

4、touchcancel

当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。

【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三个。

由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用event.preventDefault(),来阻止屏幕的默认滚动。

除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
1、touches:表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时,event.touches.length=1,

当两个手指在触屏上时,event.touches.length=2,以此类推。
2、targetTouches:特定于事件目标的touch对象数组。

因为touch事件是会冒泡的,所以利用这个属性指出目标对象。

3、changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。

每个touch对象都包含下列几个属性:
4、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;
  });
</div>

使用clientX……时,必须要指明具体的touch对象,而不要直接指明数组。

event.touches[0]

在touchend事件处理函数中,当该事件发生时,touches里面已经没有任何的touch对象了,此时,就要使用changeTouches集合。

手势事件

  1. gesturestart:当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发。
  2. gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
  3. gestureend:当任何一个手指从屏幕上面移开时触发。

【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。

触摸事件与手势事件之间的关系

1、当一个手指放在屏幕上时,会触发touchstart事件,如果另一个手指又放在了屏幕上,则会触发gesturestart事件,随后触发基于该手指的touchstart事件。

2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件,但只要有一个手指移开,则会触发gestureend事件,紧接着又会触发toucheend事件。

手势的专有属性

  1. rotation:表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从零开始。
  2. scale:表示两个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始,并随距离拉大而增长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JS触摸事件、手势事件详解

相关文章

  • 2017-05-11完美实现js选项卡切换效果(二)
  • 2017-05-11简单实现jQuery多选框功能
  • 2017-08-19js显示当前系统时间并且显示星期几
  • 2017-05-11基于JS实现9种不同的面包屑和分布式多步骤导航效果
  • 2017-08-14js中输入数字自动货币格式化
  • 2017-05-11基于JavaScript实现自定义滚动条
  • 2017-05-11JS仿JQuery选择器功能
  • 2017-05-11微信小程序 点击控件后选中其它反选实例详解
  • 2017-05-11JS中实现函数return多个返回值的实例
  • 2017-05-11AngularJS执行流程详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
    • 详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
    • jQuery基于Ajax方式提交表单功能示例
    • Vue开发中整合axios的文件整理
    • js面向对象之封装(构造函数)
    • JS拉起或下载app的实现代码
    • JS触摸事件、手势事件详解
    • 十大热门的JavaScript框架和库
    • NodeJS处理Express中异步错误
    • json的结构与遍历方法实例分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有