• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > Javascript 高级手势使用介绍

Javascript 高级手势使用介绍

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含Javascript,高级手势,使用介绍等相关知识,佚名 希望在学习及工作中可以帮助到您

  在IE10中新加入的对高级用户输入的识别支持,举例说明:注册一个点击操作,通过一句addEventListener 就能够知道当前用户的点击是哪种设备,是手指的点击,是鼠标的单击还是触控笔的点击(平板设备都会带有触控笔)。

 以上这段代码就是能够识别出当前用户的点击是哪种设备,通过回调的方法中 e.pointerType 还进行判断。鼠标是4,触控笔是3,手指是2。至于值为1是何种设备还有待研究。

还有需要注意的就是 想在javascript中添加对输入设备的识别,注册的方法事件也是有点点区别。

addEventListener 添加的事件为 MSPointerDown

而在IE10中对于这样的多种设备识别中优先处理的手指的点击,前提是不影响功能正常单击的情况下。然而IE10不仅仅能识别用户的输入设备还支持非常多的高级手势

以下为IE10高级手势支持的演示

 

创建手势对象

在您的网站中处理手势的第一步是实例化手势对象。

var myGesture = new MSGesture();

接下来,为该手势提供一个目标元素。浏览器将对该元素触发手势事件。同时,该元素还可以确定事件的坐标空间。

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

最后,告知手势对象在手势识别期间处理哪些指针。

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

注意:请不要忘记您需要使用 –ms-touch-action 来配置元素以防止其执行默认触摸操作(例如,平移和缩放),并为输入提供指针事件。

处理手势事件

一旦手势对象具有有效目标并至少添加了一个指针,则其将开始触发手势事件。手势事件可分为两种:静态手势(例如,点击或保持)和动态手势(例如,收缩、旋转和轻扫)。

点击

最基本的手势识别是点击。当检测到点击时,将会在手势对象的目标元素触发 MSGestureTap 事件。不同于单击事件,点击手势只能在用户触摸、按鼠标按钮或使用手写笔触控而不移动时触发。如果您要区分用户点击元素和拖动元素的操作,这一点通常会显得十分有用。

长按

长按手势是指用户使用一个手指触摸屏幕,并保持片刻并抬起而不移动的操作。在长按交互期间,MSGestureHold 事件会针对手势的各种状态而多次触发:

动态手势(例如,收缩或旋转)将以转换的形式报告,这与 CSS 2D 转换颇为类似。动态手势可触发三种事件:MSGestureStart、MSGestureChange(随着手势的持续而重复触发)和 MSGestureEnd。每个事件都包含缩放(收缩)、旋转、转换和速度等相关信息。

由于动态手势以转换的形式报告,因此使用包含 CSS 2D 转换的 MSGesture 来操作诸如照片或拼图等元素将变得十分轻松。例如,您可以通过下列方式启用缩放、旋转和拖动元素的操作:

.translate(-e.offsetX, -e.offsetY); // Move the transform origin

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

  • 用html5的canvas和JavaScript创建一个绘图程序的简单实例
  • Javascript 高级手势使用介绍
  • svg和css3实现环形渐变进度条的代码示例
  • 用exfe.js和canvas解决移动端 IOS 拍照上传图片翻转问题(附代码)
  • Canvas跨域的解决方案介绍
  • canvas实现图片涂鸦功能(附代码)
  • 用canvas实现简单的下雪效果(附代码)
  • HTML5中一些可以优化的细节介绍
  • HTML5 WebSQL四种基本操作的介绍
  • HTML5和原生app如何进行交互?

相关文章

  • 2018-12-03HTML5重塑Web世界它将如何改变互联网_html5教程技巧
  • 2018-12-03移动HTML5中MUI框架的使用方法
  • 2018-12-03用HTML5制作视频拼图的教程_html5教程技巧
  • 2018-12-03HTML5新增属性:classList属性的使用方法
  • 2018-12-03HTML5 的百度百科词条中,有一个中间是对勾,边缘圆锯齿状图标,是什么?
  • 2018-12-03HTMl5的存储方式sessionStorage和localStorage详解_html5教程技巧
  • 2018-12-03html 5中使用video元素制作一个影片播放器
  • 2017-08-06html5 canvas 画图教程案例分析
  • 2018-12-03vue实现图片滚动效果
  • 2018-12-03H5怎样实现拖放功能

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5中canvas的使用总结
    • HTML5开发实例-3D全景(ThreeJs全景Demo) 详解(图)
    • HTML5每日一练之视频标签的应用
    • 基于HTML5 Canvas:字符串,路径,背景,图片的详解_html5教程技巧
    • 通过HTML5和WebGL来制作2D游戏
    • HTML5 b和i标记将被赋予真正的语义_html5教程技巧
    • HTML5 CSS3模仿优酷视频截图功能示例
    • 检测浏览器对HTML5和CSS3支持度的方法
    • h5调用摄像头的实现方法
    • CSS3 画基本图形,圆形、椭圆形、三角形等

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

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