Como diferenciar o evento de clique único e o evento de clique duplo?

Eu tenho um único botão em li com id "my_id". Anexei dois eventos jQuery com este elemento

1

$("#my_id").click(function() { 
    alert('single click');
});

2

$("#my_id").dblclick(function() {
    alert('double click');
});

Mas toda vez que me dá o single click

Você precisa usar um tempo limite para verificar se há um outro clique após o primeiro clique.

Aqui está o truque :

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Uso:

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})

<button>Click Me!</button>

EDITAR:

Conforme declarado abaixo, prefira usar o dblclickevento nativo : http://www.quirksmode.org/dom/events/click.html

Ou aquele fornecido pela jQuery: http://api.jquery.com/dblclick/

O comportamento do dblclickevento é explicado em Quirksmode .

A ordem dos eventos para um dblclické:

1. mousedown
2. mouseup
3. clique
4. mousedown
5. mouseup
6. clique
7. dblclick

A única exceção a essa regra é (claro) o Internet Explorer com sua ordem personalizada de:

1. mousedown
2. mouseup
3. clique
4. mouseup
5. dblclick

Como você pode ver, ouvir os dois eventos juntos no mesmo elemento resultará em chamadas extras para seu clickmanipulador.

Em vez de utilizar mais estados ad-hoc e setTimeout, descobrimos que existe uma propriedade nativa chamada detailque você pode acessar a partir do eventobjeto!

element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};

Navegadores modernos e até mesmo o IE-9 suportam :)

Fonte: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

Uma função simples. Nenhum jquery ou outra estrutura é necessária. Passe suas funções como parâmetros

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>

Receio que o comportamento dependa do navegador:

Não é aconselhável vincular os manipuladores aos eventos click e dblclick para o mesmo elemento. A sequência de eventos disparados varia de navegador para navegador, alguns recebendo dois eventos de clique antes do dblclick e outros apenas um. A sensibilidade do clique duplo (tempo máximo entre os cliques detectado como um clique duplo) pode variar de acordo com o sistema operacional e o navegador, e geralmente é configurável pelo usuário.

http://api.jquery.com/dblclick/

Executando seu código no Firefox, o alert () no click()manipulador evita que você clique uma segunda vez. Se você remover esse alerta, obterá os dois eventos.

Bem, para clicar duas vezes (clique duas vezes), você deve primeiro clicar uma vez. O click()manipulador dispara em seu primeiro clique e, como o alerta é exibido, você não tem chance de dar o segundo clique para disparar o dblclick()manipulador.

Mude seus manipuladores para fazer algo diferente de um alert()e você verá o comportamento. (talvez mude a cor de fundo do elemento):

$("#my_id").click(function() { 
    $(this).css('backgroundColor', 'red')
});

$("#my_id").dblclick(function() {
    $(this).css('backgroundColor', 'green')
});

Esta resposta tornou-se obsoleta com o tempo, verifique a solução de @kyw.

Criei uma solução inspirada na essência postada por @AdrienSchuler. Use esta solução apenas quando quiser vincular um único clique E um clique duplo a um elemento. Caso contrário, recomendo usar o nativo clicke os dblclickouvintes.

Estas são as diferenças:

• Vanillajs, sem dependências
• Não espere setTimeoutpara manipular o manipulador de clique ou duplo clique
• Ao clicar duas vezes nele, primeiro dispara o manipulador de clique e, em seguida, o manipulador

Javascript:

function makeDoubleClick(doubleClickCallback, singleClickCallback) {
    var clicks = 0, timeout;
    return function() {
        clicks++;
        if (clicks == 1) {
            singleClickCallback && singleClickCallback.apply(this, arguments);
            timeout = setTimeout(function() { clicks = 0; }, 400);
        } else {
            timeout && clearTimeout(timeout);
            doubleClickCallback && doubleClickCallback.apply(this, arguments);
            clicks = 0;
        }
    };
}

Uso:

var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));

Abaixo está o uso em um jsfiddle, o botão jQuery é o comportamento da resposta aceita.

jsfiddle

Outra solução Vanilla simples baseada na resposta A1rPun (veja seu violino para a solução jQuery, e ambas estão nesta ).

Parece que para NÃO acionar um gerenciador de clique único quando o usuário clica duas vezes, o gerenciador de clique único é necessariamente acionado após um atraso ...

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};

var makeDoubleClick = function(e) {

  var clicks = 0,
      timeout;

  return function (e) {

    clicks++;

    if (clicks == 1) {
      timeout = setTimeout(function () {
        single(e);
        clicks = 0;
      }, 250);
    } else {
      clearTimeout(timeout);
      double(e);
      clicks = 0;
    }
  };
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);

Aqui está uma alternativa ao código de jeum para um número arbitrário de eventos:

 var multiClickHandler = function (handlers, delay) {
    var clicks = 0, timeout, delay = delay || 250;
    return function (e) {
      clicks++;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        if(handlers[clicks]) handlers[clicks](e);
        clicks = 0;
      }, delay);
    };
  }

  cy.on('click', 'node', multiClickHandler({
    1: function(e){console.log('single clicked ', e.cyTarget.id())},
    2: function(e){console.log('double clicked ', e.cyTarget.id())},
    3: function(e){console.log('triple clicked ', e.cyTarget.id())},
    4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
    // ...
  }, 300));

Necessário para um aplicativo cytoscape.js .

Como diferenciar entre cliques únicos e cliques duplos em um mesmo elemento?

Se você não precisa misturá-los, você pode confiar em clicke dblclicke cada um fará o trabalho perfeitamente.

Surge um problema ao tentar misturá-los: um dblclickevento irá, na verdade, disparar um clickevento também , então você precisa determinar se um único clique é um clique único "independente" ou parte de um clique duplo.

Além disso: você não deve usar ambos clicke dblclickem um e o mesmo elemento :

Não é aconselhável vincular os manipuladores aos eventos click e dblclick para o mesmo elemento. A sequência de eventos disparados varia de navegador para navegador, alguns recebendo dois eventos de clique antes do dblclick e outros apenas um. A sensibilidade do clique duplo (tempo máximo entre os cliques detectado como um clique duplo) pode variar de acordo com o sistema operacional e o navegador, e geralmente é configurável pelo usuário.
Fonte: https://api.jquery.com/dblclick/

Agora vamos às boas notícias:

Você pode usar a detailpropriedade do evento para detectar o número de cliques relacionados ao evento. Isso torna os cliques duplos dentro do clickrazoavelmente fáceis de detectar.

O problema continua em detectar cliques únicos e se eles fazem parte de um clique duplo ou não. Para isso, voltamos a usar um cronômetro e setTimeout.

Empacotando tudo junto, com o uso de um atributo de dados (para evitar uma variável global) e sem a necessidade de contarmos nós mesmos, obtemos:

HTML:

<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>

<div id="log" style="background: #efefef;"></div>

JavaScript:

<script>
var clickTimeoutID;
$( document ).ready(function() {

    $( '.clickit' ).click( function( event ) {

        if ( event.originalEvent.detail === 1 ) {
            $( '#log' ).append( '(Event:) Single click event received.<br>' );

            /** Is this a true single click or it it a single click that's part of a double click?
             * The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
             **/
            clickTimeoutID = window.setTimeout(
                    function() {
                        $( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
                    },
                    500 // how much time users have to perform the second click in a double click -- see accessibility note below.
                );

        } else if ( event.originalEvent.detail === 2 ) {
            $( '#log' ).append( '(Event:) Double click event received.<br>' );
            $( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
            window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
        } // triple, quadruple, etc. clicks are ignored.

    });

});
</script>

Demo:

JSfiddle

Observações sobre acessibilidade e velocidades de clique duplo:

• Como afirma a Wikipedia, "O atraso máximo necessário para que dois cliques consecutivos sejam interpretados como um clique duplo não é padronizado."
• Nenhuma maneira de detectar a velocidade de clique duplo do sistema no navegador.
• Parece que o padrão é 500 ms e o intervalo de 100-900mms no Windows ( fonte )
• Pense nas pessoas com deficiência que definem, nas configurações do sistema operacional, a velocidade do clique duplo para a mais lenta.
  • Se a velocidade de clique duplo do sistema for mais lenta do que nosso padrão 500 ms acima, os comportamentos de clique único e duplo serão acionados.
  • Não use depender de cliques simples e duplos combinados em um mesmo item.
  • Ou: adicione uma configuração nas opções para poder aumentar o valor.

Demorou um pouco para encontrar uma solução satisfatória, espero que isso ajude!

Use o excelente plugin jQuery Sparkle. O plug-in oferece a opção de detectar o primeiro e o último clique. Você pode usá-lo para diferenciar entre clique e clique duplo, detectando se outro clique foi seguido pelo primeiro clique.

Confira em http://balupton.com/sandbox/jquery-sparkle/demo/

Eu escrevi um plugin jQuery simples que permite que você use um evento personalizado 'singleclick' para diferenciar um único clique de um clique duplo:

https://github.com/omriyariv/jquery-singleclick

$('#someDiv').on('singleclick', function(e) {
    // The event will be fired with a small delay.
    console.log('This is certainly a single-click');
}

A resposta correta moderna é uma mistura entre a resposta aceita e a solução de @kyw. Você precisa de um tempo limite para evitar o primeiro clique único e a event.detailverificação para evitar o segundo clique.

const button = document.getElementById('button')
let timer
button.addEventListener('click', event => {
  if (event.detail === 1) {
    timer = setTimeout(() => {
      console.log('click')
    }, 200)
  }
})
button.addEventListener('dblclick', event => {
  clearTimeout(timer)
  console.log('dblclick')
})

<button id="button">Click me</button>

Eu gosto de evitar jquery (e outras libs de 90-140k) e, como observado, os navegadores lidam com onclick primeiro, então aqui está o que eu fiz em um site que criei (este exemplo também cobre a obtenção de um local clicado local xy)

clicksNow-0; //global js, owell

function notify2(e, right) {  // called from onclick= and oncontextmenu= (rc)
var x,y,xx,yy;
var ele = document.getElementById('wrap');  
    // offset fixed parent for local win x y
var xxx= ele.offsetLeft;
var yyy= ele.offsetTop;

//NScape
if (document.layers || document.getElementById&&!document.all) {
    xx= e.pageX;
    yy= e.pageY;
} else {
    xx= e.clientX;
    yy= e.clientY;
}
x=xx-xxx;
y=yy-yyy;

clicksNow++;
    // 200 (2/10ths a sec) is about a low as i seem to be able to go
setTimeout( "processClick( " + right + " , " + x + " , " + y + ")", 200);
}

function processClick(right, x, y) {
if (clicksNow==0) return; // already processed as dblclick
if (clicksNow==2) alert('dbl');
clicksNow=0;
    ... handle, etc ...
}

espero que ajude

Com base na resposta de Adrien Schuler (muito obrigado !!!), para Datatables.net e para muitos usos, aqui está uma modificação:

Função

/**
 * For handle click and single click in child's objects
 * @param {any} selector Parents selector, like 'tr'
 * @param {any} single_click_callback Callback for single click
 * @param {any} double_click_callback Callback for dblclick
 * @param {any} timeout Timeout, optional, 300 by default
 */
jQuery.fn.single_double_click = function (selector, single_click_callback, double_click_callback, timeout) {
    return this.each(function () {
        let clicks = 0;
        jQuery(this).on('click', selector, function (event) {
            let self = this;
            clicks++;
            if (clicks == 1) {
                setTimeout(function () {
                    if (clicks == 1) {
                        single_click_callback.call(self, event);
                    } else {
                        double_click_callback.call(self, event);
                    }
                    clicks = 0;
                }, timeout || 300);
            }
        });
    });
}

Usar

$("#MyTableId").single_double_click('tr',
            function () {   //  Click
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("Click in "+id+" "+data);
            },
            function () {   //  DBLClick
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("DBLClick in "+id+" "+data);
            }
        );

isso funcionou para mim-

var clicked=0;
function chkBtnClcked(evnt) {
    clicked++;
    // wait to see if dblclick
    if (clicked===1) {
        setTimeout(function() {
            clicked=0;
            .
            .
        }, 300); // test for another click within 300ms
    }
    if (clicked===2) {
        stopTimer=setInterval(function() {
            clicked=0;
            .
            .
        }, 30*1000); // refresh every 30 seconds
    }
}

uso-

<div id="cloneimages" style="position: fixed;" onclick="chkBtnClcked(evnt)"  title="Click for next pic; double-click for slide show"></div>

Apenas postando a resposta HTML nativa apenas no caso de a necessidade ser fácil e HTML.

<p ondblclick="myFunction()" id = 'id'>Double-click me</p>

É claro que isso tem opções nativas do Jquery. ou seja ... $('#id').attr('ondblclick',function(){...})ou, como afirmado anteriormente,$('#id').dblclick(function(){...});

Eu sei que isso é antigo, mas abaixo está um único exemplo JS de um contador de loop básico com um único temporizador para determinar um clique único vs duplo. Espero que isso ajude alguém.

var count = 0;
var ele = document.getElementById("my_id");
ele.addEventListener('click', handleSingleDoubleClick, false); 

function handleSingleDoubleClick()
{
  if(!count) setTimeout(TimerFcn, 400); // 400 ms click delay
  count += 1;
}
function TimerFcn() 
{
  if(count > 1) console.log('you double clicked!')
  else console.log('you single clicked')
  count = 0;
}