I have read many articles about this issue before. For example, use a variable to record the execution interval. I feel like I have to go and masturbate every time, which is quite tiring. I like to choose tools before moving bricks. In fact, the solution is very simple. iScroll actually intercepts touchstart and touchend events when clicking on the browser. When touchend, use js to trigger the onclick event of the element (the function_end). In actual operation, touchend is first executed, and then the onclick related functions are executed again. This creates a headache of triggering twice in one click. This is not a problem. The reason why this is a problem is that we have to look at the source code of iScroll. The way to solve this problem is to refuse to execute the function a second time. And my logic is exactly the case. After executing the code that triggers the click event in the _end function, we can remove the function bound on the onclick event. Then add this event again after a few hundred milliseconds of time. For example:
The code copy is as follows:
//Before processing
<span onclick="test()">Double-click to test</span>
//After processing
<span onclick="void(0)">Double-click to test</span>
After removing the onclick related function, this second time will naturally not trigger the test function again. In order to continue using it next time, we can use setTimeout to restore the content of onclick back.
The modified iscroll source code (about 550 lines to 570 lines, in the _end function):
The code copy is as follows:
that.doubleTapTimer = setTimeout(function () {
that.doubleTapTimer = null;
// Find the last touched element
target = point.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
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);
/**The following code is new code**/
//Find the element that binds 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 value of the onclick attribute.
$(obj).attr("onclick", "void(0)");
//Prevent violent 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 (added before the _end function)
The code copy 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, it can also be implemented through a public function without modifying the iscroll source code.
The above is all about this article. I hope it will be helpful for everyone to learn to use the iscroll sliding control.