Overview of click events and commonly used events in js (PC and mobile)

1. Click event:

It is a click event on the PC side, but it is a click event on the mobile side. In mobile projects, we often distinguish clicks. What to do and what to do when double-clicking, so when the mobile browser recognizes the click, it will only execute it after confirming that it is a click. There will be a 300ms delay when using click on the mobile side: the browser will wait for the first click after the first click. , you still need to wait 300ms to see if the second click is triggered. If the second click is triggered, it does not belong to the click. If the second click is not triggered, it belongs to the click. However, in some scenarios, it is necessary

Cancel delay:

(1) Still zoom: To use this method, you must completely disable zoom to achieve the goal. Although most mobile terminals can solve this delay problem, some Apple phones still cannot; width - the width of the viewport; height - the height of the viewport; initial-scale - the initial scaling ratio; minimum-scale - the minimum ratio that the user is allowed to zoom to; maximum-scale - the maximum ratio that the user is allowed to zoom to; user-scalable - the user Is it possible to manually zoom

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

(2) fastclick.js: FastClick is a lightweight library developed by FT Labs specifically to solve the 300 millisecond click delay problem of mobile browsers. In short, when FastClick detects the touchend event, it will immediately trigger a simulated click event through the DOM custom event, and block the click event that the browser actually triggers after 300 milliseconds

First Step: Introduce the fastclick.js file into the page.

Step 2: Add the following code to the js file: After the window load event, call FastClick.attach() on the body.

window.addEventListener(function(){   
    FastClick.attach( document.body );  
},false );

If your project uses JQuery, rewrite the above code as:

$(function() {    
    FastClick.attach(document.body);    
});

Replace the click event on the mobile side:

(1) Use touchstart: touch events include touchstart, touchend, touchmove, etc. Simply use touchstart to replace click. But the problem is, what if I want to bind a click event and a sliding event to the same object? At this time, conflicts will occur. ;On the mobile side, when your finger clicks on an element, it will go through: touchstart --> touchmove -> touchend -->click

Touch event model:

Event nametouchstarttouchmovetouchendtouchcancleTriggered when closing/exiting under special circumstancesAttributes of touch event:

Function
Press your finger on the screen
Finger sliding on the screen
Finger off the screen

Attribute nametypetargetpreventDefault(returnValue)stopPropagation(cancleBubble)touches[0].clientXchangedTouches

(2) tap event: There is no tap event in the standard event. The tap event is encapsulated by some libraries, such as zepto, using touch. The time and finger position are recorded at touchstart and touchend, and compared at touchend. If the finger If the position is the same position and the time interval is short, and the touchmove event is not triggered during the process, the callback function is called; the click event will still be generated after 300ms, but there is no monitoring on the object, resulting in the "click through" phenomenon. : 1) A modal box pops up on the page. There is a button on the modal box (close the modal box), and there is an input box directly below the button (on the main page); 2) When the close button on the modal box is clicked, The modal box disappears immediately, but the click event is triggered after 300ms, and the input box happens to listen to the click event, so the input box will get focus

Commonly used events on the PC side:

Function
Event type
Event source
Block default behavior
Stop propagation of events
x value of touch position
Current value and leaving value

Event name	Function
click	Triggered when the mouse clicks
mouseover	Triggered when the mouse pointer moves over the element
mouseout	Triggered when the mouse pointer moves out of the element
mouseenter	Triggered when the mouse pointer moves over the element (bubbles are not supported)
mouseleave	Triggered when the mouse pointer moves out of the element (bubbling is not supported)
mousemove	Triggered when the mouse pointer moves over the element
mousedown	Fired when the mouse button is pressed on the element
mouseup	Fired when the mouse button is released on the element
mousewheel	Script that runs when the mouse wheel is being scrolled
keydown	Triggered when the user presses a key
keyup	Triggered when the user releases the key
load	Triggered after the page has finished loading
scroll	Script that runs when the element scroll bar is scrolled
blur	Script that runs when the element loses focus
focus	Script that runs when an element gets focus
change	Script that runs when the element value is changed

Commonly used events on mobile terminals:

Event name	Function
click	Fires when clicked (click)
load	Triggered after the page has finished loading
scroll	Script that runs when the element scroll bar is scrolled
blur	Script that runs when the element loses focus
focus	Script that runs when an element gets focus
change	Script that runs when the element value is changed
input	Replace keyup, keydown
touch event model	Handling single-finger operations
gesture event model	Handling multi-finger operations

Related recommendations:

Use native JS to encapsulate Tap events to solve the 300ms delay on the mobile terminal

Detailed introduction to JavaScript mobile terminal The basis of events and summary of commonly used event libraries

The above is the detailed content of Overview of click events and commonly used events in js (PC and mobile). For more information, please follow other related articles on the PHP Chinese website!