Supporting both TouchEvent and MouseEvent

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

touch interface cho phép cung cấp các tương tác với ứng dụng trên thiết bị. Tuy nhiên, sự thật là đa số các web hiện tại được thiết kế để làm việc với trỏ chuột. Thậm chí, khi trình duyệt hổ trợ touch, trình duyệt vẫn phải giả lập sự kiện của chuột.

Event firing

Touch event đưa ra vài yêu cầu cho trình duyệt (xem Interaction with Mouse Events and click để xem chi tiết), lưu ý răng trình duyệt có thể fire cả 2 sự kiện touch và mouse để đáp lại cùng một tương tác của user

Nếu trình duyệt fire cả 2 sự kiện touch và mouse cho cùng tương tác, trình duyệt phải  fire touchstart trước khi fire sự kiện mouse. Vì vậy, nếu ứng dụng không muốn sử dụng sự kiện mouse trên một element target, chúng ta phải gọi preventDefault().

Đây là một snippet code dùng touchmove event handler và gọi preventDefault().

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

Thứ tự Event

Thứ tự của các sự kiện touch và mouse được định nghĩa như sau:

  • touchstart
  • Zero hoặc các sự kiện touchmove tiếp tục, tùy thuộc user có tiếp tục kéo ngón tay không
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

Nếu touchstart, touchmove hoặc touchend được hủy, sẽ không có sự mouse hoặc click nào được fire, thứ tự sẽ là:

  • touchstart
  • Zero hoặc các sự kiện touchmove tiếp tục, tùy thuộc user có tiếp tục kéo ngón tay không
  • touchend

Community

Document Tags and Contributors

Những người đóng góp cho trang này: luubinhan
Cập nhật lần cuối bởi: luubinhan,