使用pointer.js进行移动和桌面事件规范化

The mobile revolution brought in a variety of new challenges, one being interaction and event handling.  We have a set of new touch events and the traditional desktop events, and click events work on both devices, but mousemove and touchmove aren't always in sync, and there are a number of other nuances you run into with different devices.  That's why Mozilla's uber-talented Web Developer Potch created pointer.js, a utility to help developers more easily manage events across devices.

移动革命带来了许多新挑战，其中之一就是交互和事件处理。 我们提供了一组新的触摸事件和传统的桌面事件，单击事件在这两种设备上均有效，但是mousemove和touchmove并不总是同步的，并且在不同设备上会遇到许多其他细微差别。 这就是Mozilla极具才华的Web开发人员Potch创建了pointer.js的原因 ，该实用程序可帮助开发人员更轻松地管理跨设备的事件。

Get pointer.js 获取pointer.js

pointer.js文档 (pointer.js Documentation)

The pointer.js documentation explains the project as well and simply as it should, so I wont reinvent the wheel.  Straight from the docs:

该pointer.js文档也很好地解释了该项目，因此我不会重新发明轮子。 直接来自文档：

活动类型 (Types of Events)

The following events are generated:

生成以下事件：

• pointerdown: based on mousedown/touchstart

  pointerdown ：基于mousedown / touchstart

• pointerup: based on mouseup/touchend

  pointerup ：基于mouseup / touchend

• pointermove: based on mousemove/touchmove

  pointermove ：基于mousemove / touchmove

• pointerleave: based on mouseout/touchleave

  pointerleave ：基于mouseout / touchleave

• pointerclick: a 'fast click' event based on a sequence of the above events. Additional heuristics are applied to determine whether or not to generate a pointerclick.

  pointerclick ：基于上述事件序列的“快速单击”事件。 应用其他启发式方法来确定是否生成pointerclick 。

事件对象 (Event Objects)

pointer events have the following custom properties:

pointer事件具有以下自定义属性：

• maskedEvent: the event that triggered the pointer event.

  maskedEvent ：触发​​指针事件的事件。

• touch: boolean- is maskedEvent a touch event?

  touch ：布尔值-maskedEvent是否为触摸事件？

• mouse: boolean- is maskedEvent a mouse event?

  mouse ：布尔值-maskedEvent是鼠标事件吗？

• x: page-normalized x coordinate of the event.

  x ：事件的页面标准化x坐标。

• y: page-normalized y coordinate of the event.

  y ：事件的页面标准化y坐标。

Simple APIs are the best APIs, and Potch nailed this one.

简单的API是最好的API，而Potch则选择了这一点。

pointer.js用法 (pointer.js Usage)

Here are a few example usages of pointer.js:

这是pointer.js的一些用法示例：

var element = document.getElementById("myElement");

element.addEventListener("pointerdown", function(detailedEvent) {
	// Do something
});

element.addEventListener("pointerleave", function(detailedEvent) {
	// Do something
});

element.addEventListener("pointerclick", function(detailedEvent) {
	// Do something
	if(detailedEvent.mouse) {
		// desktop
	}
	else {
		// mobile
	}
});

Potch wrote the JS such that you are adding custom event listeners in a traditional way via addEventListener.  I also love that Event object is true, not a new object that provides the original event as one property.  The additional information added to the object is useful in identifying the platform and which event was actually fired.

Potch编写了JS，这样您就可以通过addEventListener以传统方式添加自定义事件侦听器。 我也很喜欢Event对象为true，而不是一个将原始事件作为一个属性提供的新对象。 添加到对象的其他信息对于标识平台以及实际触发了哪个事件很有用。

Event normalization was one of the original reasons for the first event frameworks...and they didn't even have to deal with mobile devices!  Potch has done well with this event normalization utility and I can't wait to use it on my next redesign!

事件规范化是第一个事件框架的最初原因之一，而且它们甚至不必处理移动设备！ Potch使用此事件规范化实用程序做得很好，我迫不及待想在下一次重新设计时使用它！

翻译自: https://davidwalsh.name/pointer-event