Relationship between Android Touch Events and mousedown mouseup click Events

1. Mobile touch events

ontouchstart, ontouchmove, ontouchend, ontouchcancel

1. Brief introduction of Touch event

web page mouse on pc will generate onmousedown, onmouseup, onmouseout, onmouseover and onmousemove events, but ontouchstart, ontouchmove, ontouchend and ontouchcancel events will be generated when web pages on mobile terminals such as iphone, ipod, Touch and ipad touch the screen, which respectively correspond to touch screen start, drag and finish

When the finger is pressed, ontouchstart; is triggered; When the finger is moved, ontouchmove; is triggered; When the finger is removed, ontouchend is triggered. ontouchcancel is triggered when a higher-level event (such as phone access or pop-up message) cancels the current touch operation. 1 will pause games, archiving and other operations during ontouchcancel.

2. The departure relationship between Touch event and Mouse event

After touch screen operation, one moment after the finger is lifted (that is, after ontouchend occurs), the system will judge whether the content of element receiving the event has been changed. If the content is changed, the following events will not be triggered. If not, the events will be triggered in the order of mousedown, mouseup and click. In particular, the mouseout event of the previous event will only be triggered when another touch screen event is triggered.

2. Relationship between mousedown, mouseup, click events

When you click on the select tab element, a drop-down will pop up. However, when there are no elements in option, you don't want to pop up the drop-down (for example, in some browsers, clicking select will give a mask effect by default, and if there is no data selection at this time, the pop-up is unfriendly).

The first thought was to use click event control, and found that there will still be drop-downs... actually this is controlled by mousedown event.

Here, we will explain click, mousedown and mouseup. The specification requires that click events will be triggered only if mousedown and mouseup events are triggered one after another on the same element. If one of mousedown or mouseup is canceled, the click event will not be triggered.

This sentence is also very easy to understand. Sometimes when we browse the web page, the mouse is pressed on a button or link, but suddenly we change our mind. At this time, we will move the mouse and release the mouse in another blank space. Haha ~ I believe that everyone often has experience on the Internet. This actually takes advantage of the click event, which requires that mousedown and mouseup events be triggered in succession on the same element.

<script type="text/javascript">
  var len = 0;
  $('#sel').mousedown(function(){
    if(len == 0){//  Simulation 1 Under select Mark with no data on the label 
      console.log('mousedown');
      return false;
    }
  }).mouseup(function(){
    console.log('mouseup');
  }).click(function(){
    console.log('click');
  });
</script>

After clicking, I found that the order of log is: mousedown- > mouseup-- > click

When return false in mousedown, no drop-down or cover layer will pop up...

Here we will introduce the events of the mouse again:

Nine mouse events are defined in DOM Level 3 events, which are summarized below.

click: Triggered when the user clicks the main mouse button (1 is usually the left button) or presses the Enter key. This one point is important to ensure accessibility, meaning that the onclick event handler can be executed with either the keyboard or the mouse.

dblclick: Triggered when the user double-clicks the main mouse button (1 is usually the left button). Technically, this event is not specified in the DOM Level 2 event specification, but since it is widely supported, DOM Level 3 events incorporate it into the standard.

mousedown: Triggered when the user presses any mouse button. This event cannot be triggered by keyboard.

mouseenter: Triggered when the mouse cursor moves from outside the element for the first time into the range of the element. This event does not bubble and does not trigger when the cursor moves over 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 over the element moves outside the range of the element. This event does not bubble and does not trigger when the cursor moves over 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: Triggered repeatedly when the mouse pointer moves within the element. This event cannot be triggered by keyboard.

mouseout: Triggered when the mouse pointer is over one element and the user moves it into another element. Another element moved in may be external to the previous one, or it may be a child of this element. This event cannot be triggered by keyboard.

mouseover: Triggered when the mouse pointer is outside one element and the user moves it within the boundaries of another element for the first time. This event cannot be triggered by keyboard.

mouseup: Triggered when the user releases the mouse button. This event cannot be triggered by keyboard. All elements on the page support mouse events. Except for mouseenter and mouseleave, all mouse events bubble and can be canceled, and canceling mouse events will affect the browser's default behavior. Removing the default behavior of mouse events also affects other events, because mouse events are inextricably related to other events.

If there are any deficiencies, please give me more advice! Hope to bring you help!

Summarize