触摸事件

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

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

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

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

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

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

  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,来覆盖浏览器的默认行为(可能包括在滑动时滚动页面),并防止触发鼠标事件,您也可能拥有它的处理器。