Как различить событие одного клика и событие двойного клика?

Question

У меня есть одна кнопка в li с идентификатором "my_id". Я прикрепил two jquery события с этим элементом

1

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

2.

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

Но каждый раз это дает мне single click

Answer 1

Я написал простой плагин jQuery, который позволяет использовать пользовательское событие 'singleclick', чтобы отличить одиночный щелчок от двойного щелчка:

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

Answer 2

Как различать одиночные и двойные щелчки на одном и том же элементе?

Если вам не нужно смешивать их, вы можете положиться на click и dblclick, и каждый будет выполнять свою работу просто отлично.

При попытке их смешать возникает проблема: dblclick событие фактически вызовет также click событие , так что вынеобходимо определить, является ли одиночный щелчок «автономным» одиночным щелчком или частью двойного щелчка.

Кроме того: вы не должны использовать оба click и dblclick дляодин и тот же элемент :

Нецелесообразно привязывать обработчики к событиям click и dblclick для одного и того же элемента.Последовательность запускаемых событий варьируется от браузера к браузеру: одни получают два события щелчка до dblclick, а другие - только одно.Чувствительность к двойному щелчку (максимальное время между щелчками, которое определяется как двойной щелчок) может варьироваться в зависимости от операционной системы и браузера и часто настраивается пользователем.
Источник: https://api.jquery.com/dblclick/

Сейчасхорошие новости:

Вы можете использовать свойство события detail, чтобы определить количество кликов , связанных с событием.Это позволяет легко обнаружить двойные щелчки внутри click.

Остается проблема обнаружения одиночных щелчков и определения того, являются ли они частью двойного щелчка.Для этого мы вернемся к использованию таймера и setTimeout.

Оборачивая все это вместе с использованием атрибута данных (чтобы избежать глобальной переменной) и без необходимости самостоятельно подсчитывать количество кликов, мыполучить:

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>

Демонстрация:

JSfiddle

---

Замечания о доступности и скорости двойного щелчка:

• Как говорит Википедия «Максимальная задержка, необходимая для двух последовательных щелчков, которые должны интерпретироваться как двойной щелчок, не стандартизирована».
• Нет способа определить скорость двойного щелчка системы в браузере.
• По умолчанию установлено значение 500 мс и диапазон 100-900 мм в Windows ( source )
• Подумайте о людях с ограниченными возможностями, которые в своих настройках ОС устанавливают скорость двойного щелчка на минимальной скорости.
  • Если скорость двойного щелчка системы ниже, чем наша стандартная скорость 500 мс выше, будут срабатывать как одиночные, так и двойные щелчки.
  • Либо не используйте полагаться на комбинированные одиночные идважды щелкните один и тот же элемент.
  • Или: добавьте параметр в параметры, чтобы иметь возможность увеличить значение.

---

Потребовалось время, чтобы найти удовлетворительное решение, надеюсь, это поможет!

Answer 3

Мне нравится избегать jquery (и других библиотек по 90-140 КБ), и, как уже отмечалось, браузеры сначала обрабатывают onclick, так что вот что я сделал на созданном мной веб-сайте (этот пример также касается получения местоположения по щелчку 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 ...
}

надеюсь, что помогает