JQuery'de bir tıklama ve bekletmeyi nasıl dinleyebilirim?

Kullanıcı bir düğmeyi tıkladığında ve ardından bu tıklamayı 1000 ila 1500 ms basılı tuttuğunda bir olayı tetikleyebilmek istiyorum.

JQuery çekirdek işlevi veya bunu zaten etkinleştiren bir eklenti var mı?

Kendi başıma mı atmalıyım? Nereden başlamalıyım?

var timeoutId = 0;

$('#myElement').on('mousedown', function() {
    timeoutId = setTimeout(myFunction, 1000);
}).on('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
});

Düzenleme : AndyE'ye göre düzeltme ... teşekkürler!

Düzenleme 2 : gnarf başına aynı işleyiciye sahip iki olay için şimdi bind kullanma

Hava kodlu (ancak bu keman üzerinde test edildi )

(function($) {
    function startTrigger(e) {
        var $elem = $(this);
        $elem.data('mouseheld_timeout', setTimeout(function() {
            $elem.trigger('mouseheld');
        }, e.data));
    }

    function stopTrigger() {
        var $elem = $(this);
        clearTimeout($elem.data('mouseheld_timeout'));
    }


    var mouseheld = $.event.special.mouseheld = {
        setup: function(data) {
            // the first binding of a mouseheld event on an element will trigger this
            // lets bind our event handlers
            var $this = $(this);
            $this.bind('mousedown', +data || mouseheld.time, startTrigger);
            $this.bind('mouseleave mouseup', stopTrigger);
        },
        teardown: function() {
            var $this = $(this);
            $this.unbind('mousedown', startTrigger);
            $this.unbind('mouseleave mouseup', stopTrigger);
        },
        time: 750 // default to 750ms
    };
})(jQuery);

// usage
$("div").bind('mouseheld', function(e) {
    console.log('Held', e);
})

İlgilenen varsa bunun için basit bir JQuery eklentisi yaptım.

http://plugins.jquery.com/pressAndHold/

Muhtemelen bir tekme olabilir setTimeoutgörüşmemizi mousedownde iptal sonra ve mouseup(eğer mouseupzaman aşımı tamamlamadan önce olur).

Ancak, bir eklenti var gibi görünüyor: longclick .

İşte mevcut uygulamam:

$.liveClickHold = function(selector, fn) {

    $(selector).live("mousedown", function(evt) {

        var $this = $(this).data("mousedown", true);

        setTimeout(function() {
            if ($this.data("mousedown") === true) {
                fn(evt);
            }
        }, 500);

    });

    $(selector).live("mouseup", function(evt) {
        $(this).data("mousedown", false);
    });

}

    var _timeoutId = 0;

    var _startHoldEvent = function(e) {
      _timeoutId = setInterval(function() {
         myFunction.call(e.target);
      }, 1000);
    };

    var _stopHoldEvent = function() {
      clearInterval(_timeoutId );
    };

    $('#myElement').on('mousedown', _startHoldEvent).on('mouseup mouseleave', _stopHoldEvent);

Kolaylaştırmak için bazı kodlar yazdım

//Add custom event listener
$(':root').on('mousedown', '*', function() {
    var el = $(this),
        events = $._data(this, 'events');
    if (events && events.clickHold) {
        el.data(
            'clickHoldTimer',
            setTimeout(
                function() {
                    el.trigger('clickHold')
                },
                el.data('clickHoldTimeout')
            )
        );
    }
}).on('mouseup mouseleave mousemove', '*', function() {
    clearTimeout($(this).data('clickHoldTimer'));
});

//Attach it to the element
$('#HoldListener').data('clickHoldTimeout', 2000); //Time to hold
$('#HoldListener').on('clickHold', function() {
    console.log('Worked!');
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<img src="http://lorempixel.com/400/200/" id="HoldListener">

JSFiddle'da görün

Şimdi sadece bekletme zamanını ayarlamanız ve clickHoldelementinize etkinlik eklemeniz gerekiyor

Bunu dene:

var thumbnailHold;

    $(".image_thumb").mousedown(function() {
        thumbnailHold = setTimeout(function(){
             checkboxOn(); // Your action Here

         } , 1000);
     return false;
});

$(".image_thumb").mouseup(function() {
    clearTimeout(thumbnailHold);
});