1. Mobile touch event
ontouchstart、ontouchmove、ontouchend、ontouchcancel
1. Introduction to the Touch event
The mouse button on the web page on the PC will generate events such as onmousedown, onmouseup, onmouseout, onmouseover, and onmousemove. However, when touching the web page on mobile terminals such as iPhone, ipod Touch, and iPad, ontouchstart, ontouchmove, ontouchend, and ontouchcancel events will be generated, which correspond to the touch screen start, drag and finish touch screen events and cancellation respectively.
- When the finger is pressed, ontouchstart is triggered;
- When moving the finger, trigger ontouchmove;
- When the finger is removed, ontouchend is triggered.
- When some higher-level events occur (such as phone access or pop-up information), the current touch operation will be cancelled, that is, ontouchcancel will be triggered. Generally, games, save and other operations will be paused during ontouchcancel.
2. Touch event and Mouse event trigger relationship
After touch screen operation, the moment the finger lifts up (i.e., after ontouchend occurs), the system will determine whether the content of the element received by the event has been changed. If the content is changed, the next event will not be triggered. If it does not change, the event will be triggered in the order of mousedown, mouseup, and click. It should be mentioned in particular that the mouseout event of the previous event will be triggered only when another touch screen event is triggered.
2. The relationship between mousedown, mouseup, click events
When clicking on the select tag element, a drop-down will pop up. However, when there are no elements in the option, you do not want the drop-down to pop up (for example, in some browsers, clicking select will default to a cover effect, and if there is no data selection at this time, the pop-up will be unfriendly).
First of all, I thought of using click event control, and found that there will still be pull-down... In fact, this is controlled by mousedown event.
Here we explain click, mousedown, mouseup. The specification requires that the click event will be triggered only if the mousedown and mouseup events are triggered successively on the same element; if one of the mousedown or mouseup is cancelled, the click event will not be triggered.
This sentence is also easy to understand. Sometimes when we are browsing the web, the mouse presses on a button or link, but suddenly changes our mind. At this time, we usually move the mouse away and release the mouse in another blank space haha~ I believe that everyone has experience in surfing the Internet often. In fact, this uses the click event to require mousedown and mouseup events to be triggered successively on the same element.
<script type="text/javascript">
var len = 0;
$('#sel').mousedown(function(){
if(len == 0){// Simulate the flag that the select tag has no data ('mousedown');
return false;
}
}).mouseup(function(){
('mouseup');
}).click(function(){
('click');
});
</script>
After clicking, I found that the order of logs is: mousedown-->mouseup-->click
When return false in mousedown, the pull-down or cover layer will not pop up...
Here are the various events of the mouse:
9 mouse events are defined in the DOM3 level event, and the introduction is as follows.
click: Triggered when the user clicks the main mouse button (usually the button on the left) or presses the Enter key. This is important for ensuring accessibility, meaning that the onclick event handler can be executed both through the keyboard and through the mouse.
dblclick: Triggered when the user double-clicks the main mouse button (usually the button on the left). Technically, this event is not specified in the DOM2 level event specification, but given its widespread support, DOM3 level events include it in the standard.
mousedown: Triggered when the user presses any mouse button. This event cannot be triggered through the keyboard.
mouseenter: Triggered when the mouse cursor first moves from outside the element to within the element range. This event does not bubbling and will not fire when the cursor moves to the descendant element. The DOM2 level event does not define this event, but the DOM3 level event incorporates it into the specification. IE, Firefox 9+ and Opera support this event.
mouseleave: Triggered when the mouse cursor located above the element moves outside the element range. This event does not bubbling and will not fire when the cursor moves to the descendant element. The DOM2 level event does not define this event, but the DOM3 level event incorporates it into the specification. IE, Firefox 9+ and Opera support this event.
mousemove: Repeat when the mouse pointer moves inside the element. This event cannot be triggered through the keyboard.
mouseout: fired when the mouse pointer is above one element and then the user moves it into another element. Another element that is moved in may be outside the previous element or may be a child of this element. This event cannot be triggered through the keyboard.
mouseover: fires when the mouse pointer is outside an element and then the user moves it into the boundary of another element for the first time. This event cannot be triggered through the keyboard.
mouseup: Triggered when the user releases the mouse button. This event cannot be triggered through the keyboard. All elements on the page support mouse events. Except for mouseenter and mouseleave, all mouse events will bubble up and can also be cancelled. Cancelling the mouse event will affect the browser's default behavior. Undoing the default behavior of a mouse event also affects other events because the mouse event is inseparable from other events.
If there are any shortcomings, please give me some advice! Hope it helps you!
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support. If you want to know more about it, please see the relevant links below