Necessidade de cancelar clique / eventos mouseup quando duplo clique evento detectado

Question

Como isso é feito?

Answer 1

Esta é uma boa pergunta, e eu realmente não acho que isso pode ser feito facilmente. ( Alguns discussão sobre este )

Se ele é super duper importante para você ter essa funcionalidade, você pode cortá-lo assim:

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

E aqui é um href="http://jsbin.com/ahezu" rel="noreferrer"> exemplo .

Como apontado nos comentários, há um plugin para isso que faz o que eu fiz acima praticamente, mas pacotes-lo para você, assim você não tem que ver o feio: FixClick .

Answer 2

Raymond Chen discutiu alguns dos implicações da única versus -duplo clicando -. embora ele está falando no contexto do Windows, o que ele diz é relevante para design de interface baseada em browser

Basicamente, a ação tomada em um duplo clique deve ser uma coisa lógica a fazer depois de um único clique. Assim, por exemplo, em uma UI desktop, único clique seleciona um item, e dê um duplo clique abre-lo (por exemplo, abre o arquivo, ou lançamentos da aplicação). O usuário teria que selecionar o arquivo para abri-lo de qualquer maneira, por isso não importa que a ação de clique único é tomado antes da ação de duplo clique.

Se você tem um componente UI cuja ação de clique duplo é completamente sem relação com a ação de clique único, de modo que se torna necessário para evitar a ação de clique único ocorra uma vez que o sistema percebe que foi realmente um clique duplo, em seguida, você realmente deveria a repensar o seu design. Os usuários vão achar que é estranho e contra-intuitivo, na medida em que não vai agir da maneira que eles são usados ??para coisas que agem.

Se você ainda quiser ir por esse caminho, então você terá que usar a técnica debouncing (caso em que todas as ações de clique único será adiada) ou então implementar algum mecanismo pelo qual o manipulador de clique duplo desfaz o trabalho realizado pela manipulador de clique único.

Você também deve estar ciente de que alguns usuários definir um tempo muito longo clique duplo. Alguém com, por exemplo, com as mãos artríticas pode ter um tempo de clique duplo de mais de um segundo conjunto em suas preferências do sistema, de modo a técnica debouncing baseado em algum período de tempo arbitrário de sua escolha vai fazer componente sua UI inacessível para as pessoas se tomando as impossibilita de ação único clique que tomam a ação de duplo clique. O "desfazer o que aconteceu no único clique" técnica é a única solução viável para isso, tanto quanto eu sei.

Answer 3

A técnica descrita em outras respostas é conhecido como debouncing .

Answer 4

jQuery faísca oferece uma solução elegante limpo para isso, através da implementação de um evento personalizado SingleClick. Ao fazer isso, você pode usá-lo como qualquer outro evento, assim:

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

Ele também fornece eventos personalizados para os últimos e primeiros cliques de uma série de cliques. E o evento personalizado lastclick realmente passa a quantidade de cliques de volta! Então, você poderia fazer isso!

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

Você pode encontrar o código-fonte para a definição do evento personalizado aqui .

É de código aberto sob a licença AGPL, assim você pode se sentir livre para pegar o que você precisa sair dela sem preocupações! :-) É também desenvolvido ativamente no dia-a-dia para que você nunca vai ser curto de apoio.

Mas o mais importante é uma DRY Plugin / Effect Framework para lhe permitir desenvolver plugins e extensões muito mais facilmente. Então, espero que isso ajude a alcançar esse objetivo!

Answer 5

Se isto é para um botão de envio de um formulário (que não é necessariamente o caso para o cartaz original, mas pode ser o caso para outras pessoas para chegar aqui via Google), uma opção mais fácil seria a de desativar o elemento que está sendo clicou no seu manipulador de eventos clique:

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