Javascript 高级手势使用介绍


Posted in HTML / CSS onApril 21, 2013

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

 <canvas id="MyCanvas"></canvas>
    <script>
        MyCanvas.addEventListener(
"MSPointerDown", MyBack, false);
        
function MyBack(e) {
            alert(e.pointerType.toString());
        }
    
</script>

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

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

addEventListener 添加的事件为 MSPointerDown

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

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

Javascript 高级手势使用介绍

 

创建手势对象

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

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 事件会针对手势的各种状态而多次触发:

复制代码
代码如下:

element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signals the end of the gesture.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}

动态手势(收缩、旋转、轻扫和拖动)

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

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

复制代码
代码如下:

targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
.rotate(e.rotation * 180 / Math.PI) // Apply Rotation
.scale(e.scale) // Apply Scale
.translate(e.translationX, e.translationY) // Apply Translation
.translate(-e.offsetX, -e.offsetY); // Move the transform origin back
}

缩放和旋转等动态手势可支持鼠标操作,具体可通过在旋转鼠标滚轮的同时分别使用 CTRL 或 SHIFT 修饰键来实现。

HTML / CSS 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 #HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 #HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 #HTML / CSS
程序设计HTML5 Canvas API
Apr 08 #HTML / CSS
html5与css3小应用
Apr 03 #HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 #HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 #HTML / CSS
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
聊天室php&amp;mysql(四)
2006/10/09 PHP
php生成excel文件的简单方法
2014/02/08 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
Vue性能优化的方法
2020/07/30 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python的re正则表达式实例代码
2018/01/24 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
教师简历自我评价
2014/02/03 职场文书
安全教育感言
2014/03/04 职场文书
物理教育专业求职信
2014/06/25 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
python 提取html文本的方法
2021/05/20 Python