今天在js中发现指针事件，请问什么叫指针事件pointer event?
网友回复
Pointer Event叫浏览器的统一指针事件。
在早期的浏览器，输入的事件其实相对单纯，只有考虑到鼠标和键盘两种；而当时的鼠标事件，其实就是 click、mousedown、mouseup 等等的事件。但是当手机、平板开始流行时候，再移动装置上的主要操作界面，已经从鼠标变成是触控了～ 由于触控和鼠标的操作逻辑，算是有根本上的差异的，再加上大部分的装置又支持多点触控，所以虽然浏览器大多会把触控的事件对应回传统的鼠标事件，但是如果希望能有更细致的操作，传统的鼠标事件是不够用的。 而目前 W3C 针对触控操作的部分，则有两种事件模型可以使用，其中一个是专门为了触控设计的 Touch Event，这应该算是目前大部分移动浏览器所支持的事件架构；而另一种，则是由微软所提出的、试图统一所有指针装置的事件架构、Pointer Event。相较于目前主流的 Touch Event （W3C）只有去处理触控的事件，微软提出的 Pointer Event 则是希望能把所有的指针事件都统一来做管理、让程序开发时能更简单地使用。下图就是官方的示意图。
很遗憾的，目前基本上只有微软自家的 Internet Explorer（10+）有原生支持 Pointer event，其他的浏览器，都仅支持 Touch Even；而再加上 IE 本身并不支持 Touch Event，为了兼容其他浏览器，微软提供一个让其他浏览器也能支持 Pointer Event 的 JavaScript 函式库handjs
基本上只要在网页裡面引入这个 JavaScript 档后，Firefox 或 Chrome 也就都可以使用 Pointer Event 了～
事件的定义
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 则是笔型装置的倾斜程度。
使用的话，由于 自己也是刚开始玩，所以这边就不自己写范例了。
在微软官方的博客文章《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》内，就有展示、以及使用范例了～有兴趣写的话，应该是参考这边就可以了。另外，它裡面也有提供一个范例网页（连结），可以做进一步的参考。
Windows 版的 FireFox 预设应该是把触控事件关闭的，需要手动开启，否则就算是在平板上用触控也只会抓到鼠标事件。他的开启方法是在 FireFox 打开「about:config」的页面，找到「dom.w3c_touch_events.enabled」这个项目，把他的值从「0」改成「1」。
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;
};
我们看看handjs的示例demo代码
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hand.js"></script>
<style>
* {
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;
/* prevent webkit from resizing text to fit */
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
/* prevent copy paste, to allow, change 'none' to 'text' */
-webkit-tap-highlight-color: rgba(0,0,0,0);
touch-action: none;
}
body {
background-color: #000000;
margin: 0px;
}
canvas {
background-color: #111133;
di...点击查看剩余70%
by thinkfuture
我知道答案，我要回答
私活外包
