Tips you Might Need (part 1)

The mobile slider is compatible with the PC and mobile terminals

preface

Hello, I am K, a new front end. Since the beginning of this article, this series has planned to share some of the problems I encountered in my daily work and my solutions. Maybe you need them, and I hope I can help you. OK, no more words, let’s get to the topic!

background

Base for the company’s main business is a PC web page, and I enter this company, fore hind feet came a test little sister, pei, is a little sister, and then gave me a front end to stay on a dozen bugs (I now know why don’t offend tested, wow of a loud cry, I change not yet?), a smile, the world is so beautiful ~. And then, one of the bugs is that on the iPad you can’t slide the slider that sends captcha when you sign up. Ok, let’s see what happens.

Scene reappearance

This is the most common check slider!! At first I naively thought, this is not easy, can not be done in a minute? Five minutes later… Another five minutes… Ok, let’s skip 500 minutes here! But it really only takes 5 minutes!

Somebody, get on the code

(Silently pulls the picture over)

Originally, his code had only one mouse event bound to it, so how could he swipe on the iPad?

$event = $event = $event = $event = $event = $event = $event = $event = $event = $event The answer, of course, is yes, but no (using the mouse with your fingers). (at this time I heard a distant classmate asked, what is the event) OK, so I had to reluctant to answer (blush, shy), he is touch event!!

So when we bind an element to a mobile device, we need to use the touchStart event, so we need to bind an event like this:

When we define the event, we need to determine whether it is mouse or touch.

If the touch event is detected, it is naturally mobile terminal, if not, then we obediently use mouse event!

And then, on top of that, because we also need to use the event itself to determine how far we’re moving, we need to make a judgment in the process of moving, in the calculation of the function of moving,

So we can figure out whether it’s the same distance, whether it’s the same distance, whether it’s the same distance, whether it’s the same distance, whether it’s the same distance, whether it’s the same distance, whether it’s the same distance, and then we can figure out whether it’s the right place, okay? Isn’t that easy? ! Another thing to note here is that you need to add a default event to prevent the screen from following the slide.

Finally, we need to listen and destroy the two events, so we can add two listener events to the hook function to finish our work.

conclusion

The whole process is actually very simple, I believe you must have their own better method, I write down here is also to help themselves to do a knowledge review, but also hope to help the next classmate who encountered this problem. Because this is the first time to write, if there is any shortage or incorrect place, I hope you can correct, I will revise as soon as possible, thank you!