Solution au déclenchement d'un clic d'événement deux fois dans les compétences iScroll

Solution au déclenchement d'un clic d'événement deux fois dans les compétences iScroll_javascript

WBOY

Libérer： 2016-05-16 16:10:25

original

1562 Les gens l'ont consulté

J’ai déjà lu de nombreux articles d’amis traitant de ce problème. Par exemple, utilisez une variable pour enregistrer l'intervalle d'exécution ou quelque chose du genre. J'ai l'impression de devoir me masturber à chaque fois, ce qui est assez fatiguant. J'aime choisir des outils avant de déplacer des briques. En fait, la solution à ce problème est très simple. iScroll intercepte en fait les événements touchstart et touchend lorsque l'on clique sur le navigateur. Utilisez js pour déclencher l'événement onclick de l'élément (fonction _end) lorsque vous touchez la fin. En fonctionnement réel, touchend est exécuté en premier, puis la fonction associée à onclick est exécutée. Cela crée un casse-tête avec un clic et deux déclencheurs. Ce n'est pas un problème en premier lieu. La raison pour laquelle c'est un problème est que nous devons jeter un œil au code source d'iScroll. La façon de résoudre ce problème est de refuser d’exécuter la fonction une deuxième fois. Et ma logique est exactement la même. Nous pouvons supprimer la fonction liée à l'événement onclick après avoir exécuté le code qui déclenche l'événement click dans la fonction _end. Ajoutez ensuite à nouveau l'événement après quelques centaines de millisecondes de timing. Par exemple :

Copier le code Le code est le suivant :

//Avant le traitement

Double-cliquez sur test

//Après traitement 

Test de double-clic

Après avoir supprimé les fonctions liées à onclick, la fonction de test ne se déclenchera naturellement pas une deuxième fois. Afin de continuer à l'utiliser la prochaine fois, nous pouvons utiliser setTimeout pour restaurer le contenu onclick.

Le code source iscroll modifié (environ 550 à 570 lignes, dans la fonction _end) :

Copier le code Le code est le suivant :

that.doubleTapTimer = setTimeout(function () {
                            ça.doubleTapTimer = null;
                            // Retrouver le dernier élément touché
                            cible = point.cible;
                            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, nul);
                                ev._fake = vrai;
                                target.dispatchEvent(ev);
                                /**Les codes suivants sont de nouveaux codes**/
                                //找到绑定cliquez sur事件的元素。
                                var obj = $(target).attr("onclick") != null ? $(target) : $(target).parents("[onclick]")[0];
                                si (obj != null) {
                                    var clickContent = $(obj).attr("onclick");
                                    if (clickContent != "void(0)") {
                                        //利用新的属性来存储原有的cliquez函数
                                        $(obj).attr("data-clickbak", $(obj).attr("onclick"));
//Modifiez la valeur de l'attribut onclick.
$(obj).attr("onclick", "void(0)");
//Empêcher les clics violents
Si (that.hashBox.length>0) {
pour (var _i = 0; _i < that.hashBox.length; _i )
                                                                                                                                                                                That.hashBox.splice(_i, 1);
pause;
                                                                                                                                                                                                                                                That.hashBox.push ($(obj));
Ça._clickBack();
                                                                                                                                                                                                                                                                  }                                                                                                                                                                                                                                               } //fin
                                                                                                   }

Fonction _clickBack et extrait de code hashBox (ajoutés avant la fonction _end)

Copier le code Le code est le suivant :

        hashBox : [],

/*Restaurer l'événement de l'objet cliqué*/

​​​​​ _clickBack : fonction () {

            var ça = ceci ;

              setTimeout(function () {

Si (that.hashBox.length > 0) {

                    var obj = that.hashBox.pop();

                                                         obj.attr("onclick", obj.attr("data-clickbak"));

Si (that.hashBox.length > 0) that._clickBack();

                }

             }, 500);

>

Bien sûr, il peut également être implémenté via une fonction publique sans modifier le code source d'iscroll.

Ce qui précède représente tout le contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre à utiliser le contrôle coulissant iscroll