The conditions
A z-index is greater than B, that is, A is displayed above B floating layer; A touch occurs, A disappears immediately after touch occurs, and B event binds click.
The principle of
When a finger touches the screen, the system generates two events, one is touch, one is click; After touch execution is completed, A event disappears from the document tree. Moreover, since the mobile terminal click has A delay of 200ms-300ms, when the system is about to trigger click, it finds that B is the element closest to the user at the position where the user clicks. So you apply the click event directly to the B element.
why
Since click has a 200ms-300ms delay on the mobile end, there is no penetration event on the PC side, because there is no delay when the USER clicks the mouse on the PC side.
The solution
You can add fastclick to Github, including fastclick.js, because the Fastclick source code doesn’t depend on other libraries, so you can add it directly to the native JS
window.addEventListener( “load”, function() {
FastClick.attach( document.body );
}, false );
If require:
Var FastClick = the require (” FastClick “); FastClick.attach(document.body, options);
2. Replace the onClick event with the on TouchEnd event and block the default e.preventDefault();
3. Delay the event processing for a certain period of time, usually more than 300ms
$(“#aa”).on(“tap”, function(event) {setTimeout(function(){},320); $(“#aa”).on(“tap”, function(event) {setTimeout(function(){ }); This method is actually quite good, and can be used in conjunction with animations such as fadeInIn/fadeOut to produce excessive effects
4. Add a mask layer to the target page
Add a transparent shell layer on the target page to make the click on the previous page invalid on this shell layer. The specific method is to use a higher-order component, add a timer in the higher-order component, generate a shell layer when each page is loaded, and disappear the shell layer after 400ms.