web-dev-qa-db-fra.com

Besoin d'annuler les événements click/mouseup lorsqu'un événement double-clic est détecté

Comment est-ce fait?

javascriptjqueryevent-handlingclickdouble-click
41
Daddy Warbox

C'est une bonne question et je ne pense pas que cela puisse être fait facilement. ( Quelques discussions à ce sujet )

S'il est extrêmement important pour vous d'avoir cette fonctionnalité, vous pouvez la pirater de la manière suivante:

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

Et voici un exemple au travail .

Comme indiqué dans les commentaires, il existe un plugin qui fait ce que j'ai déjà fait ci-dessus, mais le conditionne pour vous afin que vous n'ayez pas à voir le laid: FixClick .

76
Paolo Bergantino

Raymond Chen a évoqué certaines des implications du simple clic contre le double-clic - bien qu'il parle dans le contexte de Windows, ce qu'il dit est pertinent pour la conception d'interface utilisateur basée sur un navigateur.

Fondamentalement, l'action prise sur un double clic devrait être une chose logique à faire après un simple clic. Ainsi, par exemple, dans une interface utilisateur de bureau, un simple clic sélectionne un élément, puis double-cliquez pour l'ouvrir (par exemple, ouvrir le fichier ou lancer l'application). De toute façon, l’utilisateur devra sélectionner le fichier pour l’ouvrir. Ainsi, l’action en un seul clic est effectuée avant l’action en double-clic.

Si vous avez un composant d'interface utilisateur dont l'action de double-clic n'a aucun lien avec l'action de simple-clic, de sorte qu'il devient nécessaire d'empêcher que l'action de simple-clic se produise une fois que le système s'est rendu compte qu'il s'agissait en fait d'un double-clic, vous devez vraiment repenser votre conception. Les utilisateurs le trouveront maladroit et contre-intuitif, dans la mesure où il ne se comportera pas de la manière dont ils sont habitués.

Si vous voulez toujours utiliser cette méthode, vous devrez soit utiliser la technique de suppression du rebond (dans ce cas, toutes les actions en un seul clic seront retardées), ou alors mettre en place un mécanisme par lequel le gestionnaire de double clic annule le travail effectué par le gestionnaire de simple clic. .

Vous devez également savoir que certains utilisateurs définissent un temps de double-clic très long. Une personne ayant, par exemple, des mains arthritiques peut avoir un temps de double-clic supérieur à un second ensemble dans ses préférences système. Par conséquent, la technique de suppression du rebond basée sur une période de temps arbitraire de votre choix rendra votre composant d'interface utilisateur inaccessible à ces personnes si prendre l'action simple clic empêche de prendre l'action double clic. Pour autant que je sache, la technique "annuler ce qui vient de se passer en un seul clic" est la seule solution de contournement viable pour cela.

32
NickFitz

La technique décrite dans les autres réponses est appelée debouncing .

7
Walter Rumsby

jQuery Sparkle fournit une solution élégante et propre pour cela, en implémentant un événement personnalisé en un clic. En faisant cela, vous pouvez l'utiliser comme n'importe quel autre événement, donc:

$('#el').singleclick(function(){});
// or event
$('#el').bind('singleclick', function(){});

Il fournit également des événements personnalisés pour les derniers et premiers clics d'une série de clics. Et l'événement personnalisé lastclick transmet en réalité le nombre de clics! Pour que tu puisses faire ça!

$('#el').lastclick(function(event,clicks){
    if ( clicks === 3 ) alert('Tripple Click!');
});

Vous pouvez trouver le code source pour définir l'événement personnalisé ici .

Il est open source sous licence AGPL, vous pouvez donc vous procurer tout ce dont vous avez besoin, sans souci! :-) Il est également activement développé au jour le jour afin que vous ne manquiez jamais d'assistance.

Mais le plus important, c’est un DRY plugin/framework d’effets qui vous permet de développer des plugins et des extensions beaucoup plus facilement. Alors espérons que cela vous aidera à atteindre cet objectif!

1
balupton

S'il s'agit d'un bouton soumettant un formulaire (ce qui n'est pas nécessairement le cas pour l'affiche originale, mais peut-être pour d'autres personnes qui arrivent via Google), une option plus simple consisterait à désactiver l'élément sur lequel vous cliquez. votre gestionnaire d'événements click:

$(selector).click(function(e) {
    $(this).prop('disable', true);
}
0
Charlie Kilian