Solution to event click triggering twice in iScroll_javascript skills-JS Tutorial-php.cn

Solution to event click triggering twice in iScroll_javascript skills

WBOY

Release： 2016-05-16 16:10:25

Original

1583 people have browsed it

I have read many friends’ articles discussing this issue before. For example, use a variable to record the execution interval or something. I feel like I have to masturbate every time, which is quite tiring. I like to choose tools before moving bricks. In fact, the solution to this problem is very simple. iScroll actually intercepts the touchstart and touchend events when the browser is clicked. Use js to trigger the element's onclick event (_end function) when touching end. In actual operation, touchend is executed first, and then the onclick related function is executed. This creates a headache of one click and two triggers. This is not a problem in the first place. The reason why this is a problem is that we have to take a look at the source code of iScroll. The way to solve this problem is to refuse to execute the function for the second time. And my logic is exactly the same. We can remove the function bound to the onclick event after executing the code that triggers the click event in the _end function. Then add the event again after a few hundred milliseconds of timing. For example:

Copy code The code is as follows:

//Before processing

Double-click test

//After processing 

Double-click test

After removing the onclick related functions, the test function will naturally not be triggered the second time. In order to continue using it next time, we can use setTimeout to restore the onclick content.

The modified iscroll source code (about 550 to 570 lines, in the _end function):

Copy code The code 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 codes are new codes**/
                                //找到绑定click事件的元素。
                                var obj = $(target).attr("onclick") != null ? $(target) : $(target).parents("[onclick]")[0];
                                if (obj != null) {
                                    var clickContent = $(obj).attr("onclick");
                                    if (clickContent != "void(0)") {
                                        //利用新的属性来存储原有的click函数
                                        $(obj).attr("data-clickbak", $(obj).attr("onclick"));
//Change the onclick attribute value.
$(obj).attr("onclick", "void(0)");
//Prevent violent clicks
If (that.hashBox.length>0) {
for (var _i = 0; _i < that.hashBox.length; _i )
                                                                                                                                                                                 That.hashBox.splice(_i, 1);
break;
                                                                                                                                                                                                                                                 That.hashBox.push($(obj));
That._clickBack();
                                                                                                                                                                                                                                                                  }                                                                                                                                                                                                                                                   }//end
                                                                                                   }

_clickBack function and hashBox code snippet (added before _end function)

Copy code 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, it can also be implemented through a public function without modifying the iscroll source code.

The above is all the content of this article. I hope it will be helpful for everyone to learn to use the iscroll sliding control