Lösung für das doppelte Auslösen von Ereignisklicks in iScroll_javascript-Kenntnissen-js-Tutorial-php.cn

Lösung für das doppelte Auslösen von Ereignisklicks in iScroll_javascript-Kenntnissen

WBOY

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

Original

1575 Leute haben es durchsucht

Ich habe bereits Artikel von vielen Freunden gelesen, in denen dieses Problem diskutiert wurde. Verwenden Sie beispielsweise eine Variable, um das Ausführungsintervall oder ähnliches aufzuzeichnen. Ich habe das Gefühl, jedes Mal masturbieren zu müssen, was ziemlich ermüdend ist. Ich wähle gerne Werkzeuge aus, bevor ich Steine verschiebe. Tatsächlich ist die Lösung dieses Problems sehr einfach. iScroll fängt tatsächlich die Ereignisse touchstart und touchend ab, wenn auf den Browser geklickt wird. Verwenden Sie js, um das Onclick-Ereignis des Elements (_end-Funktion) auszulösen, wenn Sie das Ende berühren. Im tatsächlichen Betrieb wird zuerst touchend und dann die onclick-bezogene Funktion ausgeführt. Dies verursacht Kopfschmerzen mit einem Klick und zwei Auslösern. Das ist zunächst einmal kein Problem. Der Grund, warum dies ein Problem darstellt, ist, dass wir uns den Quellcode von iScroll ansehen müssen. Die Lösung dieses Problems besteht darin, die Ausführung der Funktion zum zweiten Mal zu verweigern. Und meine Logik ist genau die gleiche. Wir können die an das onclick-Ereignis gebundene Funktion entfernen, nachdem wir den Code ausgeführt haben, der das click-Ereignis in der _end-Funktion auslöst. Fügen Sie das Ereignis dann nach einigen hundert Millisekunden erneut hinzu. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

//Vor der Verarbeitung

Doppelklick-Test

//Nach der Verarbeitung 

Doppelklicktest

Nach dem Entfernen der onclick-bezogenen Funktionen wird die Testfunktion natürlich nicht beim zweiten Mal ausgelöst. Um es beim nächsten Mal weiter zu verwenden, können wir setTimeout verwenden, um den Onclick-Inhalt wiederherzustellen.

Der geänderte iscroll-Quellcode (ca. 550 bis 570 Zeilen, in der _end-Funktion):

Code kopieren Der Code lautet wie folgt:

that.doubleTapTimer = setTimeout(function () {
                            that.doubleTapTimer = null;
                            // Finde das zuletzt berührte 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);
                                /**Die folgenden Codes sind neue 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"));
//Ändern Sie den Wert des Onclick-Attributs.
$(obj).attr("onclick", "void(0)");
//Heftige Klicks verhindern
If (that.hashBox.length>0) {
for (var _i = 0; _i < that.hashBox.length; _i )
                                                                                                                                                                       That.hashBox.splice(_i, 1);
Pause;
                                                                                                                                                                                                                                     That.hashBox.push($(obj));
That._clickBack();
                                                                                                                                                                                                                                                    }                                                                                                                                                                                                                  //Ende
                                                                                               }

_clickBack-Funktion und HashBox-Code-Snippet (vor der _end-Funktion hinzugefügt)

Code kopieren Der Code lautet wie folgt:

        hashBox: [],

/*Das Ereignis des angeklickten Objekts wiederherstellen*/

​​​​​ _clickBack: Funktion () {

            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);

}

Natürlich kann es auch über eine öffentliche Funktion implementiert werden, ohne den iscroll-Quellcode zu ändern.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, die Verwendung der Bildlaufsteuerung zu erlernen.