前言

Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则。

PointerEvent

PointEvent对象继承自MouseEvent,使用上也比较类似。

  1. mousedown -> pointerdown
  2. mouseenter -> pointerenter
  3. mouseleave -> pointerleave
  4. mousemove -> pointermove
  5. mouseout -> pointerout
  6. mouseover -> pointerover
  7. mouseup -> pointerup

PointerEvent提供了多有预期的鼠标事件属性,并添加了通用的附加属性,来帮助您区分输入类型和特点。

  1. height
  2. isPrimary
  3. pointerId
  4. pointerType
  5. pressure
  6. tiltX
  7. tiltY
  8. width

在现在的JS编码中,推荐使用特性检测(以前是浏览器检测)来编写代码,我们可以用以下代码检测浏览器是否支持该特性:

if (window.PointerEvent) {
// Pointer events are supported.
}

那接下来看一下具体的事件代码:

window.addEventListener('pointerdown', pointerdownHandler, false);

function pointerdownHandler (evt) {
console.log(evt)
}

通过输出,可以更直观的看到PointerEvent的各个属性。

通过浏览器的navigator对象的maxTouthPoints,可以拿到当前设备支持的最大多点触控的数量:

navigator.maxTouchPoints

从win8开始,IE提供了默认的触摸事件处理,如果想全部由js代码控制触摸事件,那么可以使用:

touch-action: none;

来禁用默认值。

参考资料

https://msdn.microsoft.com/en-us/library/ie/dn433244(v=vs.85).aspx

http://www.w3.org/TR/pointerevents/

浏览器 Pointer Events的更多相关文章

  1. 浏览器的统一指针事件:Pointer Event

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  2. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  3. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  4. touch pointer

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  5. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  6. 【转】谈谈Google Polymer以及Web UI框架的未来

    原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...

  7. Google Polymer以及Web UI框架

    时代在进步,原本前端只是用来简单的数据显示以及提交数据到后端处理逻辑的地方,而随着SPA的发展,前端的逻辑也越来越是庞大,恰巧,今天看微博的时候,发现一个概念讨论的比较多,就是 Web Compone ...

  8. VNC常用操作及常见问题解决办法汇总

    VNC登录用户缺省是root,但在安装oracle时必须用oracle用户的身份登录,下面我们就以oracle为例说明如何配置VNC,从而可以使用不同的用户登录到主机.步骤描述如下:    步骤一:修 ...

  9. 【JavaScript】谈谈Google Polymer以及Web UI框架的未来

    摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同.他认为Polymer这样高互操作性的设计才应该是Web ...

随机推荐

  1. Django配置与静态文件

    settings.py """ Django settings for myproject project. Generated by 'django-admin sta ...

  2. 通过ReentrantLock源代码分析AbstractQueuedSynchronizer独占模式

    1. 重入锁的概念与作用       reentrant 锁意味着什么呢?简单来说,它有一个与获取锁相关的计数器,如果已占有锁的某个线程再次获取锁,那么lock方法中将计数器就加1后就会立刻返回.当释 ...

  3. Swift开发iOS应用过程中的问题和解决记录

    虚拟机里安装OSX+XCode开发环境 用真机的请直接跳过这个部分. 主要是在VitrualBox里安装mac系统和xcode,参考这篇教程,VirtualBox的版本是4.3.18 r96156,O ...

  4. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  5. C#中服务端接受前端JSON字符串转换成字典集合

    我们是否可以把从前端接受的JSON字符串转换成字典集合呢? 比如从前端接收:{'size':'10', 'weight':'10kg'} 在服务端转换成:[{size:"10"}, ...

  6. ADB工具包15秒快速安装器,已集合ADB、FASTBOOT工具箱和最新的驱动程序

    http://www.cnroms.com/adb-and-fastboot-toolkit-with-google-usb-drivers.html 通过电脑管理安卓手机需要的三个最常用的工具包集合 ...

  7. C++矩阵运算库推荐

    最近在几个地方都看到有人问C++下用什么矩阵运算库比较好,顺便做了个调查,做一些相关的推荐吧.主要针对稠密矩阵,有时间会再写一个稀疏矩阵的推荐. Armadillo:C++下的Matlab替代品 地址 ...

  8. 解决eclipse使用Search弹出错误问题

    在eclipse中搜索时,搜索完之后有时候会弹出错误对话框,虽然错误内容有时候不同,但是解决办法都一样. 这个问题是由于eclipse中文件不同步引起的.在eclipse中,工程文件是由eclipse ...

  9. 表单验证Jquery扩展方法类

    /** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...

  10. 把C编译成javascript的方法

    把C编译成javascript的方法,便于嵌入到HTML5中 https://github.com/kripken/emscripten