Question

我想使用指针事件api实现手势。

首先，我尝试将元素上所有活动的pointerId存储到数组中。
为此，我在元素上注册了pointerdown事件侦听器，并在整个文档中注册了pointerup侦听器，因此，如果将指针从元素上拖出，则在激活时，它仍会取消当指针从设备表面等抬起时，从数组中进行注册。

下面是一个示例，显示了我要完成的工作：

var target = document.getElementById('target')

var activePointers = [];

target.addEventListener('pointerdown', function(event) {
  event.preventDefault();
  event.stopImmediatePropagation();

  // Add the pointerId to the array.
  activePointers.push(event.pointerId);
  target.textContent = activePointers;
});

// I realize that this document-wide listener should only be added once the 
// pointer is down, but that would add needless complexity to the example.
document.addEventListener('pointerup', function(event) {
  event.preventDefault();
  event.stopImmediatePropagation();

  // Remove the pointerId from the array.
  activePointers = activePointers.filter(item => item !== event.pointerId);
  target.textContent = activePointers;
});

#target {
  width: 400px;
  height: 150px;
  background: tomato;
  font-size: 4em;
  padding: .5em;
}

<!-- pointer events polyfill for mobile safari and firefox. -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

<div id="target" touch-action="none"></div>

如您所见，该元素显示放置在其上的指针的ID。当指针从设备表面抬起时，其ID应消失。

这里有多个问题，我不知道如何正确解决。

pointerup并不总是会触发，从而导致在阵列中累积不活动的ID。
当指针移动一点时，它的行为就像从表面移开一样，导致pointerup被发射。 preventDefault()或stopImmediatePropagation()不能绕过这一点。
使用多个指针触摸屏幕时，即使在事件上调用了preventDefault()或stopImmediatePropagation()，也可以打开上下文菜单。
在元素上移动指针时，即使在事件上调用了preventDefault()，也可以开始滚动。

在没有上述问题的情况下，如何正确实施呢？

EDIT0：为Safari和Firefox移动版添加了polyfill。
EDIT1：即使没有在屏幕上放置任何指针，多个指针仍在注册的图像示例：https://i.imgur.com/ggnSBNv.png
EDIT2：在使用polyfill的iOS-Safari上，其行为符合预期。
EDIT3：它在Android-Chrome上的行为符合预期。

如何正确实施指针事件跟踪

0 个答案: