javascript - On a mobile device, quickly scroll the screen and then click to stop the scrolling. How to avoid accidentally touching the tag and jumping to other pages when clicking?
我想大声告诉你
我想大声告诉你 2017-05-24 11:36:49
0
3
762

1 Question:
If you quickly scroll the screen on a mobile device and then click to stop the scrolling, how can you avoid accidentally touching the a tag and jumping to other pages when clicking?

2 This is also a problem actually encountered in the front-end development of mobile terminals. To be more specific, under normal circumstances, when our current page has a lot of content, is high in height, and scroll bars appear, when we Swipe the screen with your hand, and the page content on the screen will scroll quickly, and the scrolling will not stop because your hand has left the screen. At this time, when we want to stop scrolling, we also tap the screen lightly to stop the screen. But there is a problem at this time. If there happens to be an a label or a button at the clicked position on the screen, it will be easy to enter the next route at this time. I checked some instructions on the scroll event on mdn, but there is no explanation on the speed of the scroll process and the reaction time of stopping.

My idea is to first determine whether the scrolling event has stopped. When it stops, then give a certain time delay before subsequent clicks are effective. In this case, after rapid scrolling, click the screen for the first time to stop the scrolling, and click the screen for the second time. If you click on an a label, you can jump to other routes. How should this be achieved?

我想大声告诉你
我想大声告诉你

reply all (3)
phpcn_u1582

Are your product requirements so demanding? I feel that this should not be a problem. It should follow such physical logic. I have never seen any product that circumvents this logic. If you have to solve it, your idea is feasible. In that case, you need to proxy all links or elements with click behavior. Personally, I think it is an approach that is not worth the gain.

    滿天的星座

    Just set a state value. For example, when you scroll, the state value isScrolling = true; when the scrolling is completed or stopped by clicking, set isScrolling = false. Event triggering can only be effective when isScrolling= false.

      巴扎黑

      I have also dealt with the same problem

      • Distinguish between click events and replace click events with touch

      • Calculate the duration of the click and the distance to determine whether the click event is triggered

      If it’s not clear yet, I’ll give you a demo later

      $('#allItems').delegate('.js-snifferFullNet','click touchend',function(e) { console.log('touchend test2 数据是:'+(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop)); var endTime = new Date().getTime() - startTime; console.log(endTime); if(e.type=='touchend' &&((103))) return; else{ console.log(this); var type = e.currentTarget.childNodes[2].innerText; regClickBtn.snifferAllNetBtn(type); } });
        Latest Downloads
        More>
        Web Effects
        Website Source Code
        Website Materials
        Front End Template
        About us Disclaimer Sitemap
        php.cn:Public welfare online PHP training,Help PHP learners grow quickly!