触摸事件

我们使用的图形浏览器的风格，是考虑到鼠标界面的情况下而设计的，那个时候触摸屏非常罕见。 为了使网络在早期的触摸屏手机上“工作”，在某种程度上，这些设备的浏览器假装触摸事件是鼠标事件。 如果你点击你的屏幕，你会得到'mousedown'，'mouseup'和'click'事件。

但是这种错觉不是很健壮。 触摸屏与鼠标的工作方式不同：它没有多个按钮，当手指不在屏幕上时不能跟踪手指（来模拟"mousemove"），并且允许多个手指同时在屏幕上。

鼠标事件只涵盖了简单情况下的触摸交互 - 如果您为按钮添加"click"处理器，触摸用户仍然可以使用它。 但是像上一个示例中的可调整大小的栏在触摸屏上不起作用。

触摸交互触发了特定的事件类型。 当手指开始触摸屏幕时，您会看到'touchstart'事件。 当它在触摸中移动时，触发"touchmove"事件。 最后，当它停止触摸屏幕时，您会看到"touchend"事件。

由于许多触摸屏可以同时检测多个手指，这些事件没有与其关联的一组坐标。 相反，它们的事件对象拥有touches属性，它拥有一个类数组对象，每个对象都有自己的clientX，clientY，pageX和pageY属性。

你可以这样，在每个触摸手指周围显示红色圆圈。

  1. <style>
  2.   dot { position: absolute; display: block;
  3.         border: 2px solid red; border-radius: 50px;
  4.         height: 100px; width: 100px; }
  5. </style>
  6. <p>Touch this page</p>
  7. <script>
  8.   function update(event) {
  9.     for (let dot; dot = document.querySelector("dot");) {
  10.       dot.remove();
  11.     }
  12.     for (let i = 0; i < event.touches.length; i++) {
  13.       let {pageX, pageY} = event.touches[i];
  14.       let dot = document.createElement("dot");
  15.       dot.style.left = (pageX - 50) + "px";
  16.       dot.style.top = (pageY - 50) + "px";
  17.       document.body.appendChild(dot);
  18.     }
  19.   }
  20.   window.addEventListener("touchstart", update);
  21.   window.addEventListener("touchmove", update);
  22.   window.addEventListener("touchend", update);
  23. </script>

您经常希望在触摸事件处理器中调用preventDefault，来覆盖浏览器的默认行为（可能包括在滑动时滚动页面），并防止触发鼠标事件，您也可能拥有它的处理器。