同时支持触屏事件和鼠标事件

touch 接口使得应用可以提高触屏设备上的用户体验。然而，现在绝大多数的web内容都是为鼠标操作而设计的。因此，即使浏览器支持触屏，也必须要模拟(emulate)鼠标事件，这样即使是那些只能接受鼠标输入的内容，也不需要进行额外修改就可以正常工作。

理想状态下，一个基于触屏的应用不需要去明确指定鼠标输入。然而，由于浏览器必须要模拟(emulate)鼠标事件，很有可能有一些特定的交互问题需要去处理。下面列出了这些交互的细节 ，并指导应用开发者该如何去处理它们。

事件触发

触摸事件标准定义了一些关于触摸和鼠标交互的浏览器要求（有关详细信息，请参阅与鼠标事件的交互和单击部分），注意浏览器可以触发触摸事件和鼠标事件以响应相同的用户输入。本节介绍可能影响应用程序的条件。

如果浏览器因单个用户输入而触发触摸和鼠标事件，则浏览器必须在任何鼠标事件之前触发touchstart (en-US)。因此，如果应用程序不希望在特定触摸target 元素上触发鼠标事件，则元素的触摸事件处理程序应调用preventDefault()并且不会调度其他鼠标事件。

这是touchmove (en-US)事件处理程序调用的代码片段

preventDefault().

// touchmove handler
function process_touchmove(ev) {
  // Call preventDefault() to prevent any further handling
  ev.preventDefault();
}

事件顺序

虽然触摸和鼠标事件的特定顺序是根据实际情况而定的，但标准表明事件执行顺序是固定的：对于单个输入：

  • touchstart
  • Zero or more touchmove events, depending on movement of the finger(s)
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

如果 touchstart (en-US), touchmove (en-US) 或者 touchend (en-US) 在触摸的过程中触发了touchcancel事件，后面的鼠标事件将不会被触发，由此产生的事件序列只是:

  • touchstart
  • Zero or more touchmove events, depending on movement of the finger(s)
  • touchend

社区

相关主题和资源