Jquery bind двойной щелчок и одиночный щелчок отдельно

97

Есть ли в jquery что-то, что позволило бы мне различать поведение при двойном щелчке и одиночном щелчке?

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

Есть ли способ подождать некоторое время перед выполнением одиночного щелчка, чтобы увидеть, щелкнет ли пользователь снова или нет?

Спасибо :)

jquery  jquery-selectors 
— Критья
источник
1
— Хаим Евги

Ответы:

145

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

Я переработал его решение, чтобы оно действовало таким образом и текло так, как мой разум может лучше понять. Я уменьшил задержку с 2000 до 700, чтобы лучше моделировать то, что я считаю нормальной чувствительностью. Вот скрипка: http://jsfiddle.net/KpCwN/4/ .

Спасибо за фонд, Джон. Я надеюсь, что эта альтернативная версия будет полезна другим.

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});
— Гирлянда Папы
источник
1
Однако используйте .delegate () вместо .live ().
— Джон Стриклер
23
.on()теперь используйте их оба
— Claudiu
2
Использование этого решения задерживает событие щелчка на 700 мс! Это очень раздражает пользователя ...
— Уриэль
1
@uriel, если вы считаете, что 700 мс - это слишком долго, чтобы ждать двойного щелчка, просто уменьшите число, пока оно не будет соответствовать вашим предпочтениям.
— Garland Pope
1
начиная с jQuery 1.7: для поддержки загруженного позже содержимого (материал ajax) используйте $("document").on("click","a" function(e){вместо этого в строке 5. Эта конструкция заменяет устаревшее delegate()использование. Вместо этого documentвы можете / должны использовать любой родительский объект в aDOM, насколько это возможно, который сохраняется во времени.
— Hafenkranich
15

Решение, данное из "Nott Responding", похоже, запускает оба события, щелчок и dblclick при двойном щелчке. Однако я думаю, что это указывает в правильном направлении.

Я сделал небольшое изменение, вот результат:

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        $this.removeClass('clicked'); 
        alert("Double click");
        //here is your code for double click
    }else{
        $this.addClass('clicked');
        setTimeout(function() { 
            if ($this.hasClass('clicked')){
                $this.removeClass('clicked'); 
                alert("Just one click!");
                //your code for single click              
            }
        }, 500);          
    }
});

Попытайся

http://jsfiddle.net/calterras/xmmo3esg/

— Кальтеррас
источник
10

Конечно, привяжите два обработчика, один к, clickа другой к dblclick. Создайте переменную, которая увеличивается при каждом нажатии. затем сбрасывается после установленной задержки. Внутри функции setTimeout вы можете что-то делать ...

var DELAY = 2000,
    clicks = 0,
    timer = null;

$('a').bind({
    click: function(e) {
        clearTimeout(timer);

        timer = setTimeout(function() {
            clicks = 0;
        }, DELAY);

        if(clicks === 1) {
            alert(clicks);
             //do something here

            clicks = 0;
        }

        //Increment clicks
        clicks++;
    },
    dblclick: function(e) {
        e.preventDefault(); //don't do anything
    }
});
— Джон Стриклер
источник
Большое спасибо. Я попытался добавить if (clicks == 1), но не смог, пожалуйста, добавить функцию одиночного щелчка.
— Еще
@kritya Я отредактировал свой ответ - это должно сработать для вас лучше. См. Скрипку
— Джон Стриклер,
ООО О, я понял, где ошибся, я не сказал это ',' будучи зависимым от Ткача снов, это не выдвинуло на первый план: P wtv Спасибо :)
— kritya
9

Вероятно, вы могли бы написать свою собственную реализацию click / dblclick, чтобы она ждала дополнительного щелчка. Я не вижу в основных функциях jQuery ничего, что могло бы помочь вам в этом.

Цитата из .dblclick () на сайте jQuery

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

— Мик Хансен
источник
4

Посмотрите на следующий код

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        alert("Double click");
        //here is your code for double click
        return;
    }else{
         $this.addClass('clicked');
        //your code for single click
         setTimeout(function() { 
                 $this.removeClass('clicked'); },500);
    }//end of else
});

Демо находится здесь http://jsfiddle.net/cB484/

— Мухаммад Тахир
источник
4
мне нравится ваша идея добавить класс и использовать его как счетчик.
— nikhil
если добавить Alert (); вместо // вашего кода для одиночного щелчка он вообще не работает
— Разработчик
4

Я написал плагин jQuery, который также позволяет делегировать события click и dblclick.

// jQuery plugin to bind both single and double click to objects
// parameter 'delegateSelector' is optional and allow to delegate the events
// parameter 'dblclickWait' is optional default is 300
(function($) {
$.fn.multipleClicks = function(delegateSelector, clickFun, dblclickFun, dblclickWait) {
    var obj;
    if (typeof(delegateSelector)==='function' && typeof(clickFun)==='function') {
        dblclickWait = dblclickFun; dblclickFun = clickFun; clickFun = delegateSelector; delegateSelector = null; // If 'delegateSelector' is missing reorder arguments
    } else if (!(typeof(delegateSelector)==='string' && typeof(clickFun)==='function' && typeof(dblclickFun)==='function')) {
        return false;
    }
    return $(this).each(function() {
        $(this).on('click', delegateSelector, function(event) {
            var self = this;
            clicks = ($(self).data('clicks') || 0)+1;
            $(self).data('clicks', clicks);
            if (clicks == 1) {
                setTimeout(function(){
                    if ($(self).data('clicks') == 1) {
                        clickFun.call(self, event); // Single click action
                    } else {
                        dblclickFun.call(self, event); // Double click action
                    }
                    $(self).data('clicks', 0);
                }, dblclickWait || 300);
            }
        });
    });
};
})(jQuery);
— IlNidoDelChiurlo
источник
Этот плагин отличный! Но почему-то это не работает в IE9? Меня не интересуют более старые версии (и в настоящее время вам больше не нужно IMO), но я пытаюсь достичь функциональности, по крайней мере, в IE9 - это браузер, который может быть у любого (без ограничений ОС) и который имеет хорошую поддержку JS.
— Dennis98 04
Использование:$("body").multipleClicks('#mySelector', function(){ /* do something on click */},function(){/* do something on doubleclick */},300);
— Hafenkranich
Это фактически позволяет вам использовать оба - щелчок и двойной щелчок - одновременно для разных действий. Спасибо! Этот работает как шарм.
— Hafenkranich
3 
var singleClickTimer = 0; //define a var to hold timer event in parent scope
jqueryElem.click(function(e){ //using jquery click handler
    if (e.detail == 1) { //ensure this is the first click
        singleClickTimer = setTimeout(function(){ //create a timer
            alert('single'); //run your single click code
        },250); //250 or 1/4th second is about right
    }
});

jqueryElem.dblclick(function(e){ //using jquery dblclick handler
    clearTimeout(singleClickTimer); //cancel the single click
    alert('double'); //run your double click code
});
— Грегори Рэй
источник
Просто и эффективно. +1
— Брюс Пирсон
3

я реализую это простое решение, http://jsfiddle.net/533135/VHkLR/5/
html code

<p>Click on this paragraph.</p>
<b> </b>

код сценария

var dbclick=false;    
$("p").click(function(){
setTimeout(function(){
if(dbclick ==false){
$("b").html("clicked")
}

},200)

}).dblclick(function(){
dbclick = true
$("b").html("dbclicked")
setTimeout(function(){
dbclick = false


},300)
});


это не сильно тормозит

— Четан Сандип Рену
источник
2

Это решение работает для меня

var DELAY = 250, clicks = 0, timer = null;

$(".fc-event").click(function(e) {
    if (timer == null) {
        timer = setTimeout(function() {
           clicks = 0;
            timer = null;
            // single click code
        }, DELAY);
    }

    if(clicks === 1) {
         clearTimeout(timer);
         timer = null;
         clicks = -1;
         // double click code
    }
    clicks++;
});
— Виталий Король
источник
0 
(function($){

$.click2 = function (elm, o){
    this.ao = o;
    var DELAY = 700, clicks = 0;
    var timer = null;
    var self = this;

    $(elm).on('click', function(e){
        clicks++;
        if(clicks === 1){
            timer = setTimeout(function(){
                self.ao.click(e);
            }, DELAY);
        } else {
            clearTimeout(timer);
            self.ao.dblclick(e);
        }
    }).on('dblclick', function(e){
        e.preventDefault();
    });

};

$.click2.defaults = { click: function(e){}, dblclick: function(e){} };

$.fn.click2 = function(o){
    o = $.extend({},$.click2.defaults, o);
    this.each(function(){ new $.click2(this, o); });
    return this;
};

})(jQuery);

И, наконец, мы используем as.

$("a").click2({
    click : function(e){
        var cid = $(this).data('cid');
        console.log("Click : "+cid);
    },
    dblclick : function(e){
        var cid = $(this).data('cid');
        console.log("Double Click : "+cid);
    }
});
— Серджио Ф.Г.
источник
В чем разница между $ .click и $ .fn.click?
— FrenkyB
0

То же, что и ответ выше, но допускает тройной щелчок. (Задержка 500) http://jsfiddle.net/luenwarneke/rV78Y/1/

    var DELAY = 500,
    clicks = 0,
    timer = null;

$(document).ready(function() {
    $("a")
    .on("click", function(e){
        clicks++;  //count clicks
        timer = setTimeout(function() {
        if(clicks === 1) {
           alert('Single Click'); //perform single-click action
        } else if(clicks === 2) {
           alert('Double Click'); //perform single-click action
        } else if(clicks >= 3) {
           alert('Triple Click'); //perform Triple-click action
        }
         clearTimeout(timer);
         clicks = 0;  //after action performed, reset counter
       }, DELAY);
    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });
});
— Луен
источник
0

Это метод, который вы можете использовать, используя базовый JavaScript, который мне подходит:

var v_Result;
function OneClick() {
    v_Result = false;
    window.setTimeout(OneClick_Nei, 500)
    function OneClick_Nei() {
        if (v_Result != false) return;
        alert("single click");
    }
}
function TwoClick() {
    v_Result = true;
    alert("double click");
}
— user3781586
источник
0

Ниже мой простой подход к проблеме.

Функция JQuery:

jQuery.fn.trackClicks = function () {
    if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0);

    var timer;
    $(this).click(function () {
        $(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1);

        if (timer) clearTimeout(timer);

        var item = $(this);
        timer = setTimeout(function() {
            item.attr("data-clicks", 0);
        }, 1000);
    });
}

Реализация:

$(function () {
    $("a").trackClicks();

    $("a").click(function () {
        if ($(this).attr("data-clicks") === "2") {
            // Double clicked
        }
    });
});

Осмотрите выбранный элемент в Firefox / Chrome, чтобы увидеть, как щелчки данных идут вверх и вниз по мере того, как вы щелкаете, настройте время (1000) в соответствии с требованиями.

— mhapps
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.