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

翻译正在进行中。

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

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

事件触发

The touch events standard defines a few browser requirements regarding touch and mouse interaction (see the Interaction with Mouse Events and click section for details), noting the browser may fire both touch events and mouse events in response to the same user input. This section describes the requirement that may affect an application.

If the browser fires both touch and mouse events because of a single user input, the browser must fire a touchstart before any mouse events. Consequently, if an application does not want mouse events fired on a specific touch target element, the element's touch event handlers should call preventDefault() and no additional mouse events will be dispatched.

Here is a code snippet of the touchmove event handler calling preventDefault().

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

事件顺序

Although the specific ordering of touch and mouse events is implementation-defined, the standard indicates the following order is typical: for single input:

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

If the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be:

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

社区

相关主题和资源

文档标签和贡献者

此页面的贡献者: meteorlxy
最后编辑者: meteorlxy,