zoukankan      html  css  js  c++  java
  • 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;
        };

  • 相关阅读:
    Autofac的基本使用---4、使用Config配置
    Autofac的基本使用---3、泛型类型
    Autofac的基本使用---2、普通类型
    Autofac的基本使用---1、前言
    MVC中Autofac的使用
    EF快速入门--直接修改(简要介绍ObjectContext处理机制)
    EF生成模型时Disigner中无信息
    C语言关键字-volatile
    linux内核分析之内存管理
    (转)Linux SLUB 分配器详解
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5166423.html
Copyright © 2011-2022 走看看