Recently, when developing mobile web pages, I encountered more functions of drop-down loading. The solution was to monitor the scroll bar position and trigger the loading event when it reached the bottom. Works fine on computer emulated phone and android, but there is a problem when testing apple. After searching, I found that it was caused by the elastic sliding of Apple's "rubber band", and this was brought by the system and could not be prohibited. So I started to change my mind and use touch events to solve it. The following is a summary of the learning:
①The touch events touchstart, touchmove and touchend are newly added events of the Safari browser for iOs in order to convey some information to developers. Because iOs devices have neither a mouse nor a keyboard, the mouse and keyboard events on the PC side are not sufficient when developing interactive web pages for the mobile Safari browser.
touchstart event: Triggered when a finger touches the screen, even if a finger is already on the screen.
touchmove event: fired continuously when the finger slides on the screen. Calling the preventDefault() event during this event prevents scrolling.
touchend event: Triggered when the finger leaves the screen.
touchcancel event: Fired when the system stops tracking touches. The exact departure time for this event is not specified in the documentation
Note: The above events will bubble, although touch events are not defined in the DOM specification, they are implemented in a DOM-compatible way. So the event object for each touch event provides properties common to mouse events,
② Compatibility:
Browsers that support touch events (touchstart, touchmove, and touchend) are: Safari for iOs, WebKit for Android, Dolfin for bada, BlackBerry WebKit in OS6+, Opera Mobile 10.1+, and Phantom browser in LG's proprietary OS. Currently only Safari for iOs supports multi-touch. Firefox 6+ and Chrome for PC also support touch events.
③Event object
An event object is an object used to record some relevant information when an event occurs. The event object will only be generated when the event occurs, and it can only be accessed inside the event handler function. After all the event handler functions run, the event object will be destroyed!
The W3C DOM passes in the event object as the first parameter of the event handler function
IE treats the event object as a property of the window object (equivalent to a global variable)
④What are the inconveniences for mouse events?
1.dbclick
Touchscreen devices do not support double-tap events. Double-clicking the browser window will enlarge the screen.
This can be done by adding this line to the head tag: <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
This way the page will not zoom in and out with the gestures used
2.mouse
mouse
On the touch screen, when we click an element, it will trigger accordingly: mousemove mousedown mouseup click, so when we write the mobile client interface, we can directly add move events to elements, which can improve efficiency.
At the same time, mouseover and mouseout are also triggered. As a result of the test, I found that only when the page is refreshed for the first time, click the element, and the mouseover event will be triggered.
With the popular use of touch-screen mobile devices, W3C began to formulate the TouchEvent (touch event) specification.
1. Touch events
This type of event is fired when the user's finger is placed on the screen, swiped on the screen, or removed from the screen.
Specifically, there are the following touch events.
touchstart fires when a finger is placed on the screen.
touchmove fires continuously as the finger slides across the screen.
touchend is fired when the finger is removed from the screen.
touchcancel is triggered when the system stops tracking, when the system cancels, the documentation does not clearly state.
[Total] The above four are touch events provided by w3c, only for touch devices, the most commonly used are the first three.
Since touches cause the screen to move, you can use event.preventDefault() in the event handlers for these events to prevent the default scrolling of the screen
2. Tracking properties
In addition to the usual DOM properties, touch events also contain three touch tracking properties
1.touches: An array of touch objects representing the currently tracked touch operations.
When a finger is on the touch screen, event.touches.length=1,
When two fingers are on the touch screen, event.touches.length=2, and so on.
2.targetTouches: An array of touch objects specific to the event target.
Because touch events are bubbling, use this property to indicate the target object.
changedTouches: An array of touch objects representing what has changed since the last touch.
3. Each touch object contains the following properties:
clientX: The x coordinate of the touch target in the viewport.
clientY: The y coordinate of the touch target in the viewport.
identifier: Unique ID that identifies the touch
pageX: The x coordinate of the touch target in the page.
pageY: The y coordinate of the touch target in the page.
screenX: The x coordinate of the touch target on the screen.
screenY: The y coordinate of the touch target in the screen.
target: The touched DOM node target.
【How to use it? 】
EventUtil.addHandler(div,"touchstart",function(event){
div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY;
});
EventUtil.addHandler(div,"touchmove",function(event){
event.preventDefault();
div.innerHTML=event.touches[0].clientX;
});
EventUtil.addHandler(div,"touchend",function(event){
div.innerHTML=event.changedTouches[0].clientY;
});
When using clientX..., you must specify the specific touch object instead of specifying the array directly.
event.touches[0]
In the touchend event handler, when the event occurs, there are no touch objects in the touches. In this case, the changeTouches collection is used.
3. Gesture events
gesturestart: Triggered when one finger has been pressed on the screen and another finger is touching the screen.
gesturechange: Triggered when the position of any finger touching the screen changes.
gestureend: Triggered when any finger is removed from the screen.
[Note] These gesture events are only fired when both fingers touch the event receiving container.
4. Relationship between touch events and gesture events
①When a finger is placed on the screen, the touchstart event will be triggered. If another finger is placed on the screen again, the gesturestart event will be triggered, and then the touchstart event based on the finger will be triggered.
②If one or two fingers slide on the screen, the gesturechange event will be triggered, but as long as one finger is removed, the gestureend event will be triggered, followed by the toucheend event.
5. Proprietary properties of gestures
①rotation: Indicates the rotation angle caused by finger changes, negative values indicate counterclockwise, positive values indicate clockwise, starting from zero.
②scale: Indicates the distance between two fingers. Inward contraction will shorten the distance. This value starts from 1 and increases as the distance increases.