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

Question

Comment est-ce fait?

Answer 1

C'est une bonne question, et je ne pense pas qu'il peut être fait facilement. (Discussion sur cet)

Si il est super duper important pour vous d'avoir cette fonctionnalité, vous pouvez le modifier comme ceci:

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 de ce à travail.

Comme l'a souligné dans les commentaires, il y a un plugin pour ce qui fait ce que j'ai fait ci-dessus à peu près, mais les paquets en place pour vous si vous n'avez pas à voir le laid: FixClick.

Answer 2

Raymond Chen a discuté de certaines des implications de l'unique contre-double-cliquant - bien qu'il parle dans le contexte de Windows, ce qu'il dit est pertinent au navigateur de base de conception de l'INTERFACE utilisateur.

Fondamentalement, l'action sur un double clic doit être une chose logique à faire après un seul clic. Ainsi, par exemple, dans un bureau de l'INTERFACE utilisateur, le simple clic sélectionne un élément, double-cliquez sur l'ouvre (par exemple, le fichier s'ouvre, ou lance l'application). L'utilisateur de sélectionner le fichier à ouvrir de toute façon, il n'est pas question que le simple clic d'action est prise avant que le double-clic.

Si vous disposez d'un composant de l'INTERFACE utilisateur dont le double cliquez sur l'action est complètement sans rapport avec le simple clic d'action, tel qu'il devient nécessaire d'empêcher l'unique cliquez sur l'action de se produire une fois que le système se rend compte qu'il était en fait un double-clic, vous devriez revoir votre conception. Les utilisateurs trouveront étrange et contre-intuitif, en ce qu'il ne jouera pas de la façon dont ils sont utilisés à des choses d'agir.

Si vous voulez toujours aller de cette façon, alors vous devrez soit utiliser le rebond technique (dans ce cas, tout seul clic actions sera retardée) ou encore de mettre en œuvre un mécanisme par lequel le double cliquez sur gestionnaire annule le travail fait par l'unique gestionnaire de clic.

Vous devez également être conscients que certains utilisateurs un très long double-cliquez sur l'heure. Quelqu'un avec, par exemple, de l'arthrite des mains peut avoir un double cliquez sur le temps de plus d'une seconde définies dans les préférences système, de sorte que le rebond technique basée sur l'arbitraire période de temps de votre choix que va faire votre composant de l'INTERFACE utilisateur inaccessibles aux personnes en cas de prise unique sur l'action s'oppose à la prise de la double cliquez sur l'action. "Défaire ce qui s'est passé sur un seul cliquez sur" technique est la seule solution viable, autant que je sache.

Answer 3

La technique décrite dans les autres réponses est appelée anti-rebond .

Answer 4

jQuery Éclat propre solution élégante pour ce, par la mise en œuvre d'un événement personnalisé, cliquez une fois. 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 la dernière et la première clics d'une série de clics. Et le lastclick personnalisé événement se passe le nombre de clics de retour! Donc, vous pouvez le faire!

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

Vous pouvez trouver le code source de la définition de l'événement personnalisé ici.

Il est open source sous licence AGPL, de sorte que vous pouvez vous sentir libre de prendre ce dont vous avez besoin en sortir sans souci! :-) C'est aussi activement développé sur une base quotidienne afin que vous ne serez jamais à court de support.

Mais le plus important, c'est un SEC un Plugin ou d'un Effet de Cadre pour vous permettre de développer des plugins et des extensions beaucoup plus facilement. Donc espérons que cela aide à atteindre cet objectif!

Answer 5

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