Implement a JavaScript gesture library--base-gesture.js

Now the mobile is so popular, we can operate more on the mobile phone. It's also very necessary for a Web page to have some rich operational feel, right (if you just need click, then I'm not saying it ...) ~ ~ For example to achieve up and down, left and right sliding, click and so on, plus these things feel the web will be a lot of the library ~ ~ (comfortable). Of course. Native JavaScript does not provide us with these flashy things, and we need to do it ourselves. And of course, there are still many JS gesture libraries, such as hammer.js and so on. But learning is a process of repeating wheels (not knowing the great man, if unclaimed, that's what I mean by ~~~~~~~~~), right. Build a wheel to play, may not be used in the sports car, but perhaps the use of a tractor is good or maybe.

All right, all right, there's so much foreplay. Here's the theme. Talk about implementing a library of your own gestures. I call it the Base-gesture.js portal at the time: gesture (GitHub ... Star a bit)

Then, talk about ideas. (It's just my personal idea.) No warranties, no responsibility. Hit me ~) A small starting point, on the mobile side, if the use of click will have a 300ms delay, because the mobile side needs a double-click to enlarge the judgment, so cause this problem, Specific points can own gooole or Baidu. In order to avoid this problem we need to listen to touchstart,touchend these two events, has implemented a tap event. Then you have very studious, went to Baidu, found that they also have a Touchmove brothers event exists. In my opinion the three brothers and the Mousedown,mouseup,mousemove thief, then we can use these three events to achieve some basic gesture operation. I realized it. Mainly in the Touchstart time to record a startx, and a starty is the starting position. And then in the Touchmove when a endx and a ewndy are recorded. Now we have two points of coordinates, OH. That is to say, a little use of the mathematical knowledge to find the angle between two points, there is this angle, you can judge the Endx-startx and endy-starty of the positive and negative you will be able to basically realize the judgment, the next left and right sliding oh ~ ~ OK

Of course, there is not enough, we know, (you must know) Touchstart only at the moment of the press of the screen trigger, which leads to StartX and starty as long as the finger does not release, it will not change, and this direct cause of the problem is that you left to continue the right stroke, The previous method of judging is still judged to be left-drawn, until you are right across the starting point. Wow, this is an awkward question. It's a waste. This needs to be solved. And I decided to add a few more parameters. The first group is Comparex and Comparey. They initialize and startx and Starty values at touchstart time. The main thing is not to want to startx and Starty values do not change (later also useful) , they replace them to accomplish some tasks, and the Touchmove may update their values (when the halfway direction changes). Then there are two arrays, Gatherx and gathery. Their first saved is the value of the endx/y-comparex/y that was recorded last time the touchmove was triggered, and the second holds the value of the current endx/y-comparex/y, which we will be judging gatherx/y[1]-gatherx/ y when size, if it is less than 0, congratulate you, it changed direction (do not know that there is no clear, probably consciousness is you go out from home has been to go out of the 100 meters record saved in the first place in the gatherx/y, the next second this distance into 94 meters, save in the second place, a minus less than 0, It means you've gone back. At this time, the comparex/y equals Endx/endy represents a new starting point of the gesture, and then gatherx/gathery empty, so that the basic realization, even if it is in the middle of a very cheap move, no problem, can trigger the correct corresponding event.

The basic frame of mind is this, he can at least judge to swipe up and down. Of course, to make it practical. I added two attributes to the event, event.gapx/y represents the distance from the last trigger Touchmove on the X/Y axis, and the distance evnt.movex/y indicates where the gesture ended to the beginning of the gesture. These two are still very useful. At least I think so (because this is what the baby wants to do). With these main ideas, next you will give them encapsulation, realize a small plug-in can ah, above the right address, you can directly see, the Readme feel basically also have blood more clear (feel a bit messy ~ ~ ~), please make suggestions and find the problem ah, we learn together. I used my own wheels to build two broken cars, broken cars 1, broken Cars 2 (absolute serious private cars). The second example is something like a whole page.

Yes, but also to achieve the support of the mouse, the idea of the same, is the corresponding mouse event can be, on these, I hope we progress and improve together, so that the wheel is more awesome, maybe that day can become a running owner of the tire (OK, maybe the brain is too sleepy confused). You are welcome to ask questions and shoot bricks.

　　

Implement a JavaScript gesture library--base-gesture.js