There is no mouse on the iPad, so when the finger triggers the touch event, the system will also generate a simulated mouse event ).
This is basically the same as PC-side browsers for browsing general web pages. However, if you are creating a webapp with strong interaction with users, such as an HTML5 game or image processing tool, you may not be able to meet the product requirements by default.
A common suggestion is: on iPad (or on various mobile terminals), your webapp should be able to handle touchevent, instead of relying on mouseevent.
However, if your webapp needs to be oriented to browser users on both PC and iPad platforms at the same time, you cannot provide either of the two versions due to time or manpower... You may need to know the following details about mouseevent on the iPad in idea, and then cut down some fancy features with significant differences between the two platforms so as to make a webapp better compatible with the two platforms.
Before reading this article, I assume that you are familiar with the operations of mouseevent on PC browsers and have a rough understanding of touchevent. If you do not understand the details, it may be difficult to understand the following details.
- Safari only clickable)HtmlElement to generate a mouseevent. This is also mentioned in the ADC document.
What is clickable? The ADC document defines that only one of the four types of mouseevents in which HTML elements respond to mousemove, mousedown, mouseup, and click can be clicked. If you have a webpage menu that only responds to Mouseover and mouseout, you may not be able to work. Just add onclick = "void (0. However, the actual test shows that you can click any mouseevent in response. It is estimated that safari has fixed this problem.
Note:: All the descriptions of "clickable" and "unclickable" in the following sections refer to whether to respond to mouseevent, rather than touchevent.
- Unlike W3C recommendationsOnly when the finger leaves the screenMouseevent. Therefore, the actual sequence of events for operations such as finger-clicking on the screen is usually: touchstart-> touchend-> mousemove-> mousedown-> mouseup-> click; instead of the sequence we expect: touchstart-> mousedown-> touchend-> mouseup-> click.
- Click the screen-triggered mouseeventNot followed by toucheventThere is a latency.. This is to wait for the possible double-click operation. The actual latency of ipad2 Safari is about 375 Ms. The actual timing is like this: (press your finger) touchstart-> (quickly lift your finger) touchend-> (wait about 375 ms) mousemove-> mousedown-> mouseup-> click.
The direct impact on webapps is that the latency from user operations (finger-picked) to onclick execution is ms, and users always think that your software response is a little slow.
However, if the click speed is slow, that is, the latency between the finger and the lift is more than 120 ms, there will no longer be this 375ms latency between touchend and other mouseevents. Because the system does not think this meets the condition for quick double-click operation.
- Double-click the screen without triggering any mouseevent..I mean "anything", that is, it will not trigger the dblclick event, but will not even trigger the mousedown, mouseup, click, and other mouseevents. In this tutorial, the default event stream is: touchstart-> touchend-> touchstart-> touchend. If the page developer does not impose any restrictions, the browser attempts to scale the page by default.
- A single finger-click operation does not produce both MouseoverAnd (mousedown, Mouseup, Click)Two groups of events.If an element in response to the Mouseover event has not received the Mouseover event since the rendering is completed or the last time the mouseout event is received, click the triggered event stream to: touchstart-> touchend-> Mouseover-> mousemove; otherwise, click the triggered event stream: touchstart-> touchend-> mousemove-> mousedown-> mouseup-> click.
Elements that do not respond to the Mouseover event will only receive the previous event stream. This prevents the vast majority of links from having to jump to the page by clicking the mouse twice.
- An HTMLElement receives MouseoverAfter that, you only need to click another htmlElement to receive the mouseoutEvent.Because there is no mouse, the Mouseover and mouseout events cannot be triggered when the mouse moves to the removed element area like on a PC. You can only switch the Mouseover by clicking your fingers; the element that cannot be clicked does not trigger any mouseevent. Therefore, only the former clickable element triggers the mouseevent on another HTML element will receive the mouseout event.
- Moving fingers on the screen does not trigger a large number of mousemovesEvent.As mentioned at, the mouseevent message is only generated when the finger leaves the screen. Therefore, you can only receive one mousemove event, including all the other mouseevents triggered by this operation, coordinates are the coordinates of the finger's lifting position. Therefore, the logic implemented through mousemove on the PC browser must be implemented through touchevent on the iPad.
- It seems thatWhen the finger moves slowly on the screen, it is triggered only when the finger is lifted.MouseeventIf the finger moves quickly, the raised finger does not trigger any mouseevent..The cause is unknown.
- If an htmlElement response touchevent, The finger presses and moves on the element. Even if the finger moves out of the area of the element, the element still receives the touchmoveEvent until the finger is lifted to receive a touchendEnd. That is to say, an HTML element usually receives a complete touchstart-> (n) touchmove-> touchend event sequence, unless the system sends a touchcancel event to it. This is also different from the mouseevent feature in PC browsers.
- In the touchstart-> (0-N) touchmove-> touchendAny event function in calls event. preventdefault ()This operation does not produce any mouseevent.Therefore, you cannot expect to call preventdefault in touchstart to only prevent the occurrence of the mousedown event.
The above features have been tested and verified on safari of ipad2/ios4.3.3, and are applicable to other safari kernels (such as QQ browser HD.
For other non-Safari browsers, the support for mouseevent is basically not as complete and reasonable as safari. For example, opera mini only generates a mouseevent when you click the screen with your fingers, and touchevent is not supported. Although the UC browser moves the mousedown to touchstart, The mouseup event cannot be triggered after the fingers move. If you are interested, you can perform further tests. Android users can also perform some tests on the Android tablet. If you can share the test results with me, I would like to thank you very much.
【Appendix and reference documents]
1. Test Page Link: http://hokyhu.sinaapp.com/event_test.html
You can also experience the powerful multi-point touch function of the iPad on this page. Try to see at most several contacts.
2. W3C technical draft on touchevent: https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
This draft mainly defines technical details related to touchevent and involves a small amount of cooperation between touchevent and mouseevent.
3. ADC document: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf
This document describes the support for mouseevents in the "handling events" chapter.
