touch pointer

在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种;而当时的鼠标事件,其实就是 click、mousedown、mouseup 等等的事件。但是当手机、平板开始流行时候,再移动装置上的主要操作界面,已经从鼠标变成是触控了~

由于触控和鼠标的操作逻辑,算是有根本上的差异的,再加上大部分的装置又支持多点触控,所以虽然浏览器大多会把触控的事件对应回传统的鼠标事件,但是如果希望能有更细致的操作,传统的鼠标事件是不够用的。

而目前 W3C 针对触控操作的部分,则有两种事件模型可以使用,其中一个是专门为了触控设计的 Touch Event,这应该算是目前大部分移动浏览器所支持的事件架构;而另一种,则是由微软所提出的、试图统一所有指针装置的事件架构、Pointer Event。

相较于目前主流的 Touch Event (W3C)只有去处理触控的事件,微软提出的 Pointer Event 则是希望能把所有的指针事件都统一来做管理、让程序开发时能更简单地使用。右图就是官方的示意图。

以目前定义的标准来说,Pointer Event (W3C)能支持的指针装置包括了鼠标、触控(手指)、以及笔型装置;而除了能整合不同类型的指针装置外,Pointer Event 针对能支持的硬件,也多了相当多额外的参数,像是压力、宽度、高度,甚至比型装置的倾斜程度等等。

这些更详细的资讯,基本上都是可以让开发者根据各种指针装置的输入,来做更细致的处理的~再加上透过 Pointer Event 的架构,可以一次性地处理掉鼠标和触控等装置的事件,所以在 Heresy 来看,应该算是一种相对好的架构。

跨浏览器

很遗憾的,目前基本上只有微软自家的 Internet Explorer(10+)有原生支持 Pointer event(不过也不大一样,请参考 MSDN),其他的浏览器,都仅支持 Touch Even;而再加上 IE 本身并不支持 Touch Event,所以变成要跨浏览器处理触控事件,就得写两个版本了…

不过还好,微软他们为了推动自己提出的 Pointer Event,所以也有提供一个让其他浏览器也能支持 Pointer Event 的 JavaScript 函式库、Hand.js!他的官方网站是:

http://handjs.codeplex.com/

基本上只要在网页裡面引入这个 JavaScript 档后,Firefox 或 Chrome 也就都可以使用 Pointer Event 了~

详细的介绍则可以参考《Hand.js: a polyfill for supporting pointer events on every browser》。

事件的定义

Pointer Event 总共定义了八种事件,其列表如下:

  • pointerdown
  • pointerup
  • pointercancel
  • pointermove
  • pointerover
  • pointerout
  • pointerenter
  • pointerleave

基本上,大部分的事件,都可以对应到本来的 mouse event(MSDN 参考),在 W3C 的网页上,也有针对这些事件的详细说明;实际上,如果浏览器侦测到指鳔是主要的(primary)指针的话,他也会送出鼠标的事件。

而当触发事件时,程序可以取得定义为 PointerEvent 的资料,它应该算是继承了 MouseEvent 的结构后,再附加了一些额外的的资料;其定义如下:

interface PointerEvent : MouseEvent {
readonly attribute long pointerId;
readonly attribute long width;
readonly attribute long height;
readonly attribute float pressure;
readonly attribute long tiltX;
readonly attribute long tiltY;
readonly attribute DOMString pointerType;
readonly attribute boolean isPrimary;
};

其中,每一个指针都有属于自己的编号、也就是 pointerId;而透过 pointerType 则可以判断他是哪一种类型的指针,目前的标准包含了 mouse、pen、touch 这三种可能。

而要取得指针的位置的时候,则是可以视需要使用 screenX /screenY,或是 clientX / clientY。

其他像是 width、height,就是代表这个指针的大小(应该是给触控用的),pressure 则是指针装置的压力(介于 0-1 之间),而 tileX 和 tileY 则是笔型装置的倾斜程度。

使用的话,由于 Heresy 自己也是刚开始玩,所以这边就不自己写范例了。

在微软官方的博客文章《Hand.js: a polyfill for supporting pointer events on every browser》和《Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easy》内,就有展示、以及使用范例了~有兴趣写的话,应该是参考这边就可以了。另外,它裡面也有提供一个范例网页(连结),可以做进一步的参考。

而在《Creating an universal virtual touch joystick working for all Touch models thanks to Hand.JS》一文中,也有展示如何使用 Pointer Event 来做一个触控的摇杆游戏,应该也算是值得参考的实作。

附注:

    1. Windows 版的 FireFox 预设应该是把触控事件关闭的,需要手动开启,否则就算是在平板上用触控也只会抓到鼠标事件。他的开启方法是在 FireFox 打开「about:config」的页面,找到「dom.w3c_touch_events.enabled」这个项目,把他的值从「0」改成「1」。
    2. MouseEvent 的定义(DOM Level 3、参考):

      interface MouseEvent : UIEvent {
      readonly attribute long screenX;
      readonly attribute long screenY;
      readonly attribute long clientX;
      readonly attribute long clientY;
      readonly attribute boolean ctrlKey;
      readonly attribute boolean shiftKey;
      readonly attribute boolean altKey;
      readonly attribute boolean metaKey;
      readonly attribute unsigned short button;
      readonly attribute unsigned short buttons;
      readonly attribute EventTarget? relatedTarget;
      };

时间: 2024-10-25 15:07:36

touch pointer的相关文章

simulate windows touch input

如何模拟windows的touch操作,奋斗了几天终于出结果了,网上搜索了一个c#版本的,但是总是没有效果,并且c#要求的条件比较多,于是自己写了一个autoit轻量级的版本.autoit代码: #RequireAdmin Local $retval = _SimulateTouch(10, 1000, 300, 300) MsgBox(0, "", $retval) ; #INDEX# =================================================

各式 Web 前端開發工具整理

程式碼編寫工具 (Coding Tools) 工作流程/建置/組合 (Workflow/Builds/Assemblers) lumbar brunch grunt lineman yeoman Takeoff mimosa codeKit liveReload stealJS anvil.js modjs AUTOMATON Fire.app 瀏覽器套件管理員 (Browser Package Managers) (參見: Front-End Package Manager Compariso

移动web:翻页场景动画

在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜欢上呢. 这里没有音乐,没有炫酷的出场,只有实实在在的翻页.z 先看看效果(如果不能查看 复制下面的代码保存在本地查看) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta

ExtJS笔记 Using Events

Using Events The Components and Classes of Ext JS fire a broad range of events at various points in their lifecycle. Events allow your code to react to changes around your application. They are a key concept within Ext JS. 在ExtJS组件和类的生命周期中,会触发许多类型的事件

WPF 后台模拟界面触摸点击

win32Api提供一种方法,模拟用户触摸点击 InjectTouchInput function InitializeTouchInjection InjectTouchInput 在模拟添加触摸输入(InjectTouchInput)前,需要提前初始化(InitializeTouchInjection) 1 /// <summary> 2 /// Use this Classes static methods to initialize and inject touch input. 3

移动端touch模块

在自己写touch事件时,总是会出现各种各样的bug,正好发现zepto的touch模块,很好用,而且由于zepto和jquery语法的相似性,这个模块也可以直接引用到jquery中, 得花时间好好消化一番,这样以后自己就可以随心所欲了... var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture function swipeDirection(x1,

移动端开发概览【webview和touch事件】

Android vs Ios 我在webkit内核的chrome中进行开发的页面,拿着iPhone和安卓机来进行测试,传说中它们的浏览器内核也是WebKit,那么问题来了,同样的页面为什么在ios中和安卓中表现不同,出现了各种稀奇古怪的bug... 我尝试找下两者的根本区别: - iOS 随着2007年6月29日iPhone的上市,WebKit进入iPhone OS平台,经过Apple的定制,成为iPhone OS平台独一无二的排版引擎: - Android 在旧版本的安卓中: 熟悉Androi

Zepto.js touch模块深入分析 解决手机点击事件

源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ; (function($) { var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture function swipeDirection(x1

Android的Touch事件处理机制

Android的Touch事件处理机制比较复杂,特别是在考虑了多点触摸以及事件拦截之后. Android的Touch事件处理分3个层面:Activity层,ViewGroup层,View层. 首先说一下Touch事件处理的几条基本规则. 1.如果在某个层级没有处理ACTION_DOWN事件,那么该层就再也收不到后续的Touch事件了直到下一次ACTION_DOWN事件. 说明:a.某个层级没有处理某个事件指的是它以及它的子View都没有处理该事件. b.这条规则不适用于Activity层(它是顶