Event click in iScroll trigger two solutions _ javascript skills

IScroll is one of the commonly used sliding controls in mobile web pages. Simply put, its functions are quite rich. But sometimes it will also fall into a trap, just this time. When embedding a webpage in an android app, many mobile phones may trigger one click twice. After a period of hard work, I finally thought of a fairly reasonable solution. I have read many friends' articles about this problem. For example, use a variable to record the execution interval or something. I feel like I have to renew it every time. it's quite tiring. I like to select tools before moving bricks. In fact, this solution is very simple. IScroll intercepts the touchstart and touchend events when you click a browser. When touchend is used, js is used to trigger the onclick event of the element (_ end function ). In actual operations, touchend is executed first, and then the onclick function is executed again. In this way, the trigger of one click is a headache. This is not a problem. This is a problem because we have to look at the iScroll source code. The solution to this problem is to reject the second execution of the function. My logic is also like this. After executing the code that triggers the click event in the _ end function, we can remove the function bound to the onclick event. Then add the event again several hundred milliseconds after the scheduled time. For example:

The code is as follows:

// Before processing
Double-click test
// After processing
Double-click test

After the onclick function is removed, the test function will not be triggered again for the second time. In order to continue using this function for the next time, we can use setTimeout to restore the onclick content.

Transformed iscroll source code (about 550 lines ~ In the _ end function ):

The code is as follows:

That. doubleTapTimer = setTimeout (function (){
That. doubleTapTimer = null;
// Find the last touched element
Target = point.tar get;
While (target. nodeType! = 1) target = target. parentNode;
If (target. tagName! = 'Select' & target. tagName! = 'Input' & target. tagName! = 'Textea '){
Ev = doc. createEvent ('mouseevents ');
Ev. initMouseEvent ('click', true, true, e. view, 1,
Point. screenX, point. screenY, point. clientX, point. clientY,
E. ctrlKey, e. altKey, e. shiftKey, e. metaKey,
0, null );
Ev. _ fake = true;
Target. dispatchEvent (ev );
/** Add the following code **/
// Locate the element bound to the click event.
Var obj = $ (target). attr ("onclick ")! = Null? $ (Target): $ (target). parents ("[onclick]") [0];
If (obj! = Null ){
Var clickContent = $ (obj). attr ("onclick ");
If (clickContent! = "Void (0 )"){
// Use new attributes to store the original click function
$ (Obj). attr ("data-clickbak", $ (obj). attr ("onclick "));
// Change the onclick attribute value.
$ (Obj). attr ("onclick", "void (0 )");
// Prevents brute force clicks
If (that. hashBox. length> 0 ){
For (var _ I = 0; _ I <that. hashBox. length; _ I ++)
{
If (that. hashBox [_ I] ==$ (obj )){
That. hashBox. splice (_ I, 1 );
Break;
}
}
}
That. hashBox. push ($ (obj ));
That. _ clickBack ();
}
} // End
}
}, That. options. zoom? 250: 0 );

_ ClickBack function and hashBox code snippet (before _ end function)

The code is as follows:

HashBox: [],
/* Restore the event of the clicked object */
_ ClickBack: function (){
Var that = this;
SetTimeout (function (){
If (that. hashBox. length> 0 ){
Var obj = that. hashBox. pop ();
Obj. attr ("onclick", obj. attr ("data-clickbak "));
If (that. hashBox. length> 0) that. _ clickBack ();
}
},500 );
}

Of course, you can also use a public function without modifying the iscroll source code.

The above is all the content described in this article. I hope it will help you learn how to use the iscroll sliding control.