Problem
Recently, I encountered a very strange problem in the project. Take it out and share it with you. Due to poor literary skills, the reason is similar to that described in this article, so I will not organize the language here. Copy over directly. Original address
1. Question: Quickly scroll the screen on a mobile device and click to stop the scrolling. How can I try to avoid accidentally touching the a tag when I click and jump to another page?
2. This is also a problem actually encountered in the front-end development of the mobile terminal. In detail, under normal circumstances, when our current page has more content and higher height, when the scroll bar appears, when we use our hand Slide the screen, the page content on the screen will scroll quickly, and will not stop because the hand has left the screen. At this time, when we want to stop scrolling, we also gently tap the screen to stop the screen. But there is a problem at this time. If the location clicked on the screen happens to have an a label or a button, it is easy to enter the next route at this time. Checked some descriptions about the scroll event on mdn, but there is no description about the speed and the stop reaction time in the scroll process.
Solution I
found a lot of articles without specific solutions. Later, inspired by an article, I solved this problem. Paste the code:
$ (function () {
// When processing the sliding long list, clicking the page and forcibly stopping the page may trigger a link on the page
var count = 0,
timer = null;
var oldTop = newTop = $ (window) .scrollTop () ;
function log () {
if (timer) clearTimeout (timer);
newTop = $ (window) .scrollTop ();
console.log (++ count, oldTop, newTop);
if (newTop === oldTop) {// page Stop doing operations
$ ("a"). RemoveAttr ("onclick");
clearTimeout (timer);
} else {
oldTop = newTop;
timer = setTimeout (log, 100);
$ ("a"). Attr ("onclick "," return false "); // page is still rolling operation in
}
}
$ (window) .on ( 'touchmove', log);
});
principle
principle is to determine whether the page is still rolling in a rolling, If scrolling, click element return false to prohibit click. Otherwise, let go of the click operation. Many of my page routing jumps use the href of a, so I write this. If you can use it, you can change it to another label.
Screenshot: You can see that there is an operation that prohibits click events on the a tab of the scrolling page. After the page stops, the prohibited operation is deleted.
If you have any better comments or suggestions, please leave me a message, thank you ~
