Vous devez annuler les événements de clic / mouseUp lorsque l'événement double-cliquez sur détecté

Question

Comment cela se fait?

Answer 1

Ceci est une bonne question, et je ne pense vraiment pas que cela puisse se faire facilement. ( Une discussion sur cette )

S'il est super duper important pour vous d'avoir cette fonctionnalité, vous pouvez pirater 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 exemple de celui-ci au travail .

Comme indiqué dans les commentaires, il y a un plug-in pour ce qui fait ce que je faisais à peu près au-dessus, mais emballe pour vous afin que vous ne devez pas voir le laid: FixClick .

Answer 2

Raymond Chen a discuté des implications de - bien qu'il parle dans le contexte de Windows, ce qu'il dit est pertinent pour la conception de l'interface utilisateur basée sur un navigateur

.

En fait, les mesures prises sur un double-clic doit être une chose logique à faire après un seul clic. Ainsi, par exemple, dans une interface utilisateur de bureau, clic sélectionne un élément, et cliquez deux fois l'ouvre (par exemple ouvre le fichier, ou lance l'application). L'utilisateur doit sélectionner le fichier pour l'ouvrir de toute façon, il n'a pas d'importance que l'action simple clic est prise avant la double action de clic.

Si vous avez un composant d'interface utilisateur dont l'action double-clic est sans aucun rapport avec la seule action de clic, de sorte qu'il devient nécessaire d'empêcher l'action simple clic de se produire une fois que le système se rend compte qu'il était en fait un double-clic, alors vous devriez vraiment de repenser votre conception. Les utilisateurs trouveront maladroit et contre-intuitif, en ce sens qu'elle ne sera pas agir de la façon dont ils sont utilisés pour les choses d'agir.

Si vous voulez toujours aller de cette façon, alors vous devez soit utiliser la technique anti-rebond (dans ce cas, toutes les actions de simple clic seront retardés), ou bien mettre en place un mécanisme permettant la double gestionnaire de clic dénoue le travail effectué par le seul gestionnaire de clic.

Vous devez également savoir que certains utilisateurs de définir un temps très long temps double clic. Quelqu'un, par exemple, les mains arthritiques pourrait avoir un temps double clic de plus d'une seconde série dans leurs préférences système, de sorte que la technique de debouncing basée sur une certaine période de temps arbitraire de votre choix va rendre votre composant d'interface utilisateur inaccessible à ces personnes si en prenant l'action simple clic empêche de prendre la double action de clic. Le « undo ce qui vient de se est passé simple clic » technique est la seule solution viable pour cela, autant que je sache.

Answer 3

La technique décrite dans les autres réponses est connue sous le nom debouncing .

Answer 4

jQuery Étincelle fournit une solution élégante propre pour cela, en mettant en place un événement SingleClick personnalisé. En faisant cela, vous pouvez l'utiliser comme tout 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 lastClick personnalisé passe en fait la quantité 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 pour définir l'événement personnalisé ici .

Il est open source sous la licence AGPL, donc vous pouvez vous sentir libre de saisir ce que vous devez sortir sans soucis! :-) Il est également développé activement un jour après jour afin que vous ne serez jamais à court de soutien.

Mais le plus important encore, il est un cadre DRY Plugin / Effet pour vous permettre de développer beaucoup plus facilement des plugins et extensions. Alors espérons que cela aide à atteindre cet objectif!

Answer 5

Si cela est un bouton présentant une forme (ce qui est pas nécessairement le cas pour l'affiche originale, mais peut être le cas pour d'autres personnes obtenir ici via Google), une option plus facile serait de désactiver l'élément qui est en cours cliqué dans votre gestionnaire d'événements, cliquez sur:

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