JS Case-Mobile end-by-side gestures based on Vue

================================ formula broken Read Preface ================================

When I first thought about doing long press events, I thought of the custom instructions inside Vue, after all, there was a description in the official website:

In some cases, you still need to perform the underlying operations on the normal DOM elements, and you will use the custom Directives .

But the project is used in the app, because another unknown cause of the bug, custom event lying gun (so far his grave). The long press event was changed to me when I initialized it, it was tied directly to the DOM that needed him.

================================ is scripture ================================

The bound command is written in the mounted hook because I can't find the DOM inside the created, and in the mounted phase, all the DOM structures and data are displayed in the page,

See "Vue Lifecycle Brush " for details: https://www.cnblogs.com/padding1015/p/9159381.html

So, the following code through the continuous cycle, and ultimately written in the mounted inside

Let Odiv = document.getElementById (' canvas ');

Because the long press event is to be added to the Div#canvas, if the event is anywhere, the document

1 function false ); 2 3 function false ); 4 5 function false);

As for the three binding events in the callback to write what, it is not too close to the Vue (DUI, it is so hasty).  

Before releasing the final molding code, let me fill in a wave of "soldiers" about the event .

The main soldiers floss have three articles:

Middle: dom2 Level Event handlers

Road: Event Flow

Down Road: Touch events

The required event knowledge points are distributed as follows:

(See larger Image: Right-click on the New tab) after mastering the above knowledge point, is in the long-press function inside the application.

Don't worry ~

Long Press function principle analysis of a wave:

The so-called long press is actually the finger press down, do not move, more than a certain period of time to take the finger off a process ( I said good and reasonable ha haha. Then heard the same voice: nonsense!! ).

And in this process, it happens to be a touch of three events.

Listen to the finger press down whether there is movement, the touches play, monitoring his clientx,clienty as long as the change is not moving.

And in the process, there will occasionally be a place of heroes popping up to disturb our soldiers. That is the effect of a mobile phone comes with:

Long time, touch text on the mobile side, (at least iOS) will appear in the selection of text and other interference of our true function, with the Preventdefault () this property is not.

The paper is useless, directly on the long press function code :

In order to unnecessary trouble (in fact, I do not bother to write), the redundant other code deleted, so don't be surprised to export the default inside why only mounted.

<script> Let x = 0, y = 0, z = 0, timer1 = null;      Export default {mounted () {Let odiv = document.getElementById (' canvas ');          Odiv.addeventlistener ("Touchstart", function (e) {if (E.preventdefault) E.preventdefault ();          else E.returnvalue = false;          if (E.touches.length > 1) {return false;          } z = 0;          Timer1 = SetTimeout (function () {z = 1;          }, 500);          x = E.touches[0].clientx;      y = e.touches[0].clienty;      }, False);          Odiv.addeventlistener ("Touchmove", function (e) {if (E.preventdefault) E.preventdefault ();          else E.returnvalue = false;            if (x! = E.touches[0].clientx | | Y! = e.touches[0].clienty) {cleartimeout (timer1);          return false;      }}, False);        Odiv.addeventlistener ("Touchend", function (e) {if (E.preventdefault) E.preventdefault ();        else E.returnvalue = false; if (Z ! = 1) {cleartimeout (timer1);          x = 0;          y = 0;        return false;          } else if (z=1) {x = 0;          y = 0;          z = 0;    /* has been determined to trigger a long-press event, and then the CEO presses on to do something else */}}, False); }}</script>

Gee, how could I just dump the code and go away! Next Please see ~

explain the version of the code

<script> Let x = 0,//is used to record clientx y = 0,//used to record clientx z = 0,//used to determine if it was pressed and exceeded the set time.      Timer1 = null;//for timer export default {mounted () {Let odiv = document.getElementById (' canvas '); Because the long press event to be added to the Div#canvas, if the event is anywhere, it is the document/* add Touchstart, finger touch event */Odiv.addeventlistener ("Touchstart", Fu          Nction (e) {/* block default events, in fact, this is the compatibility of IE returnvalue not necessary */if (E.preventdefault) E.preventdefault ();          else E.returnvalue = false;          /* Trigger Touchmove causes multiple touches objects when moving, so you can jump directly out of the */if (E.touches.length > 1) {return false; }/* Here is a historical source, the second click, the value of Z to restore.          */z = 0; /* Once the finger touches the screen, a countdown timer is turned on timer1 */timer1 = SetTimeout (function () {z = 1;//If the timer is not clear at the end of the countdown, assign the z value to 1, This way, when judging z=1, the time to press and hold the screen reaches the developer's long-time setting.          Which satisfies the long press event}, 500);          /* Once the finger touches the screen, the second thing to do right away: Record the location of the point at touch, and the presence of x, y two variables */x = E.touches[0].clientx;      y = e.touches[0].clienty; }, False); /* Bind the second event touchmove, the finger continuously triggers when the fingers slide continuously on the screen */Odiv.addeventlistener ("Touchmove", function (e) {if (E.preventdefault          ) E.preventdefault ();          else E.returnvalue = false; /* judge, because each finger move will trigger touchmove continuously, will continue to add "tracking touch Property touches" *///////This property is an array, each new addition will be in the front. So each time the array inside the first object corresponding to the Clientx and Clienty, is the location of the real-time moving point//Find the role of this point, is to listen to the user, whether hold down also moved.             If you move, that's not a long press event (but this also looks at the product requirements, if you hold down also to trigger long press the logic of the rule, this does not judge) if (x! = E.touches[0].clientx | | Y! = e.touches[0].clienty) {            Specific judgment method, remember Touchstar there has been recorded ' starting point ', as long as the value of x, Y and the comparison, with two of the value of any one of the range, is moving.            Then move, first to clear the pre-ambush timer timer1. Otherwise, the countdown is still in progress, although not long-press events.            Cleartimeout (timer1);          Return false;//to remove the ' aftermath ', the ease of the end of the user's touch event monitoring.      }}, False); /* Add a third touch event touchend, the scene of this event is the user's finger from the screen when the trigger */Odiv.addeventlistener ("Touchend", function (e) {if (E.preventdefa        ult) E.preventdefault ();        else E.returnvalue = false; */* described above, when the user is taken away, just judge the user from click to take off the time. And the length of recording time is more than hempAnnoying, so then used a timer, set a time we want, time to change a state value Z, so here we just determine if z is changed */if (Z! = 1) {/* If the user finger is removed, z or 0, that is not equal to 1, indicating the timer Has not been triggered, it is not to reach the long-press time, then do not expect, with the touchmove to do the same, clear the timer.          */cleartimeout (timer1); /* But, touchend and Touchmove are a little different, touchend is end (nonsense), touchmove no matter how many times, the final finger will always be taken off the screen, this is his key point. And take away is the end, the end, is the entire touch of the end of the life process. */* So, the end thing to do is to initialize, is to restore. He needs to classify the value of x, y as original. To prepare for the next time the Touchstart is triggered. That's a very touching story.          */x = 0;          y = 0;        Return false;//then "die" with Peace of mind. } else if (z=1) {/* If a long-press event is triggered, a long-press event is finally triggered!          */////////////* He still can't get carried away, before the grand plan, still need to do some preparation, clean the battlefield, the variables are initialized */x = 0;          y = 0;          z = 0; /* Then he can happily do his long-planned career: What else does the CEO do when he presses it? */* What is it? It's 5:30, dinner.    */}}, False); }}</script>

Yes, there is another phenomenon, that is, when the swiper in Vue is eaten together, the long hold and swipe will trigger the up/down page. If there is any action inside Touchmove, plus swiper experience is not good.

2018-07-07 17:35:31

JS Case-Mobile end-by-side gestures based on Vue