Javascript 高级手势使用介绍

所属分类: 网页制作 / html5 阅读数: 1788
收藏 0 赞 0 分享

  在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高级手势支持的演示

 

创建手势对象

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

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 修饰键来实现。

更多精彩内容其他人还在看

突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)

前面已经总结了主要的API扩展(应用缓存/服务端消息/桌面通知),下面的几个只有在特定的场合才能发挥它的潜质,无一例外,IE均不支持,桌面通知目前只有Chrome支持,感兴趣的朋友可以了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

HTML5中加入了全新的结构型元素,例如页眉header,页脚footer,导航nav,内容article,章节section等除了这种整个页面的结构型元素,html5也加入了块级别的语义元素,感兴趣的朋友可以了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

在HTML5增强的元素中,最值得关注的就是表单元素;在HTML5中,表单已经做了重大的修整,一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可以详细了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代

WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件,看到此处是不是感觉特别惊讶啊,WebGL有一个很好的中文教程,就是下面使用参考中的第一个链接,所以这里不再班门弄斧,后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

前面我们看到了使用原生的WebGL API开发是多么的累,只因如此大量的WebGL框架被开发出来,这些框架不同程度的封装了创建3D场景的各种要素你可以快速创建需要的3D场景,感兴趣的朋友可以了解下,或许本文对你有所帮助
收藏 0 赞 0 分享

HTML中fieldset标签概述及使用方法

之前HTML没有好好学,导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读,感兴趣的朋友可以了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5中微数据概述及在搜索引擎中的使用举例

HTML5微数据规范是标记内容的一种方式,用于描述特定的信息类型,例如评论、人物信息或活动。微数据使用 HTML 标记(常为 span>或 div)中的简单属性为项和属性指定简要的描述性名称
收藏 0 赞 0 分享

html5新增的属性和废除的属性简要概述

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性比如表单相关的属性/链接相关属性是新增的而HTML4中一些属性就被废除掉了,感兴趣的你可以了解下,或许对你学习html5有所帮助
收藏 0 赞 0 分享

html5的新增的标签和废除的标签简要概述

HTML5中在新增加和废除很多标签的同时,也增加和废除了很多标签比如新增的结构标签:section元素/video元素等等,感兴趣的朋友可以了解下,希望本文的知识点对你有所帮助
收藏 0 赞 0 分享

html5配合css3实现带提示文字的输入框(摆脱js)

webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你
收藏 0 赞 0 分享
查看更多