Jak odróżnić zdarzenie pojedynczego kliknięcia od zdarzenia dwukrotnego kliknięcia?

Mam pojedynczy przycisk w li z identyfikatorem "my_id". Do tego elementu dołączyłem dwa zdarzenia jQuery

1.

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

2.

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

Ale za każdym razem daje mi single click

Musisz użyć limitu czasu, aby sprawdzić, czy po pierwszym kliknięciu pojawia się kolejne kliknięcie.

Oto sztuczka :

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

Stosowanie:

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

<button>Click Me!</button>

EDYTOWAĆ:

Jak podano poniżej, preferuj dblclickzdarzenie natywne : http://www.quirksmode.org/dom/events/click.html

Lub ten dostarczony przez jQuery: http://api.jquery.com/dblclick/

Zachowanie dblclickwydarzenia jest wyjaśnione w Quirksmode .

Kolejność zdarzeń dla a dblclickjest następująca:

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

Jedynym wyjątkiem od tej reguły jest (oczywiście) Internet Explorer z niestandardową kolejnością:

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

Jak widać, odsłuchiwanie obu zdarzeń razem na tym samym elemencie spowoduje dodatkowe wywołania programu clickobsługi.

Zamiast wykorzystywać więcej stanów ad-hoc i setTimeout, okazuje się, że istnieje natywna właściwość o nazwie detail, do której można uzyskać dostęp z eventobiektu!

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

Nowoczesne przeglądarki, a nawet IE-9 to obsługują :)

Źródło: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

Prosta funkcja. Nie jest wymagana żadna jquery ani inny framework. Przekaż swoje funkcje jako parametry

<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>

Obawiam się, że zachowanie zależy od przeglądarki:

Nie zaleca się wiązania programów obsługi zarówno ze zdarzeniami click, jak i dblclick dla tego samego elementu. Sekwencja wyzwalanych zdarzeń różni się w zależności od przeglądarki, przy czym niektóre otrzymują dwa zdarzenia kliknięcia przed dblclick, a inne tylko jedno. Czułość dwukrotnego kliknięcia (maksymalny czas między kliknięciami wykrywanymi jako podwójne kliknięcie) może się różnić w zależności od systemu operacyjnego i przeglądarki i często jest konfigurowalna przez użytkownika.

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

Uruchamiając kod w przeglądarce Firefox, alert () w click()module obsługi zapobiega powtórnemu kliknięciu. Jeśli usuniesz taki alert, otrzymasz oba zdarzenia.

Cóż, aby kliknąć dwukrotnie (kliknąć dwa razy), musisz najpierw kliknąć raz. Program click()obsługi uruchamia się przy pierwszym kliknięciu, a ponieważ pojawia się alert, nie masz szans na wykonanie drugiego kliknięcia, aby zwolnić program dblclick()obsługi.

Zmień swoje programy obsługi, aby zrobiły coś innego niż an, alert()a zobaczysz zachowanie. (być może zmień kolor tła elementu):

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

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

Ta odpowiedź z czasem staje się przestarzała, sprawdź rozwiązanie @ kyw.

Stworzyłem rozwiązanie zainspirowane treścią zamieszczoną przez @AdrienSchuler. Użyj tego rozwiązania tylko wtedy, gdy chcesz powiązać pojedyncze kliknięcie ORAZ podwójne kliknięcie z elementem. W przeciwnym razie polecam używanie natywnego clicki dblclicksłuchaczy.

Oto różnice:

• Vanillajs, brak zależności
• Nie czekaj na setTimeoutobsługę kliknięcia lub podwójnego kliknięcia
• Po dwukrotnym kliknięciu najpierw uruchamia procedurę obsługi kliknięcia, a następnie procedurę podwójnego kliknięcia

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

Stosowanie:

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

Poniżej znajduje się użycie w jsfiddle, przycisk jQuery to zachowanie zaakceptowanej odpowiedzi.

jsfiddle

Kolejne proste rozwiązanie Vanilla oparte na odpowiedzi A1rPun (zobacz jego skrzypce dla rozwiązania jQuery, a oba są w tym jednym ).

Wydaje się, że aby NIE wywoływać procedury obsługi pojedynczego kliknięcia, gdy użytkownik kliknie dwukrotnie, procedura obsługi pojedynczego kliknięcia jest koniecznie uruchamiana po opóźnieniu ...

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

Oto alternatywa dla kodu jeum dla dowolnej liczby zdarzeń:

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

Potrzebowałem tego do aplikacji cytoscape.js .

Jak rozróżnić pojedyncze kliknięcia od podwójnych kliknięć tego samego elementu?

Jeśli nie trzeba ich mieszać, na której można polegać clicki dblclicki każdy będzie wykonać zadanie dobrze.

Problem pojawia się, gdy próbuje je wymieszać: zdarzenie rzeczywiście wywołać zdarzenie jako dobrze , więc trzeba określić, czy jedno kliknięcie jest „stand-alone” jedno kliknięcie, lub część podwójnym kliknięciem.dblclickclick

Ponadto: nie powinieneś używać obu clicki dblclickna jednym i tym samym elemencie :

Nie zaleca się wiązania programów obsługi zarówno ze zdarzeniami click, jak i dblclick dla tego samego elementu. Sekwencja wyzwalanych zdarzeń różni się w zależności od przeglądarki, przy czym niektóre otrzymują dwa zdarzenia kliknięcia przed dblclick, a inne tylko jedno. Czułość dwukrotnego kliknięcia (maksymalny czas między kliknięciami wykrywanymi jako podwójne kliknięcie) może się różnić w zależności od systemu operacyjnego i przeglądarki i często jest konfigurowalna przez użytkownika.
Źródło: https://api.jquery.com/dblclick/

A teraz dobra wiadomość:

Możesz użyć właściwości zdarzenia, detailaby wykryć liczbę kliknięć związanych ze zdarzeniem. To sprawia, że ​​podwójne kliknięcia wewnątrz są clickdość łatwe do wykrycia.

Pozostaje problem z wykrywaniem pojedynczych kliknięć i tym, czy są one częścią podwójnego kliknięcia. W tym celu wracamy do korzystania z timera i setTimeout.

Pakując to wszystko razem, z użyciem atrybutu data (aby uniknąć zmiennej globalnej) i bez konieczności samodzielnego liczenia kliknięć, otrzymujemy:

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>

Próbny:

JSfiddle

Uwagi dotyczące dostępności i szybkości podwójnego kliknięcia:

• Jak podaje Wikipedia „Maksymalne opóźnienie wymagane dla dwóch kolejnych kliknięć, aby zinterpretować je jako dwukrotne kliknięcie, nie jest znormalizowane”.
• Brak możliwości wykrycia szybkości dwukrotnego kliknięcia systemu w przeglądarce.
• Wydaje się, że wartość domyślna to 500 ms, a zakres 100-900 mm w systemie Windows ( źródło )
• Pomyśl o osobach niepełnosprawnych, które w ustawieniach swojego systemu operacyjnego ustawiły prędkość podwójnego kliknięcia na najniższą.
  • Jeśli szybkość dwukrotnego kliknięcia w systemie jest mniejsza niż nasze domyślne 500 ms powyżej, uruchomione zostaną zachowania pojedynczego i podwójnego kliknięcia.
  • Albo nie używaj polegać na połączonym pojedynczym i podwójnym kliknięciu tego samego przedmiotu.
  • Lub: dodaj ustawienie w opcjach, aby mieć możliwość zwiększenia wartości.

Znalezienie satysfakcjonującego rozwiązania zajęło trochę czasu, mam nadzieję, że to pomoże!

Skorzystaj z doskonałej wtyczki jQuery Sparkle. Wtyczka umożliwia wykrycie pierwszego i ostatniego kliknięcia. Możesz go użyć do rozróżnienia między kliknięciem a podwójnym kliknięciem, wykrywając, czy po kolejnym kliknięciu nastąpiło pierwsze kliknięcie.

Sprawdź to na http://balupton.com/sandbox/jquery-sparkle/demo/

Napisałem prostą wtyczkę jQuery, która pozwala na użycie niestandardowego zdarzenia „singleclick” do odróżnienia pojedynczego kliknięcia od dwukrotnego:

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

Nowoczesna poprawna odpowiedź to połączenie zaakceptowanej odpowiedzi i rozwiązania @kyw. Potrzebujesz limitu czasu, aby zapobiec pierwszemu kliknięciu i event.detailsprawdzeniu, aby zapobiec drugiemu kliknięciu.

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>

Lubię unikać jquery (i innych bibliotek 90-140k), a jak zauważone przeglądarki obsługują najpierw onclick, więc oto co zrobiłem na stronie internetowej, którą utworzyłem (ten przykład obejmuje również uzyskanie klikniętej lokalizacji lokalnej 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 ...
}

mam nadzieję, że to pomoże

Na podstawie odpowiedzi Adrien Schuler (dziękuję bardzo !!!), dla Datatables.net i wielu zastosowań, oto modyfikacja:

Funkcjonować

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

Posługiwać się

$("#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);
            }
        );

to zadziałało dla mnie–

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

stosowanie-

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

Wystarczy opublikować natywną odpowiedź HTML na wypadek, gdyby potrzeba była łatwa i HTML.

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

To oczywiście ma natywne opcje Jquery. tj.… $('#id').attr('ondblclick',function(){...})lub, jak wspomniano wcześniej,$('#id').dblclick(function(){...});

Wiem, że to jest stare, ale poniżej znajduje się tylko przykład JS podstawowego licznika pętli z pojedynczym zegarem, aby określić pojedyncze lub podwójne kliknięcie. Mam nadzieję, że to komuś pomoże.

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