Làm cách nào để nghe nhấp và giữ trong jQuery?

Tôi muốn có thể kích hoạt một sự kiện khi người dùng nhấp vào một nút, sau đó giữ lần nhấp đó trong 1000 đến 1500 mili giây.

Có chức năng cốt lõi jQuery hoặc một plugin đã cho phép điều này không?

Tôi có nên cuộn của riêng tôi? Tôi nên bắt đầu từ đâu?

var timeoutId = 0;

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

Chỉnh sửa : sửa cho mỗi AndyE ... cảm ơn!

Chỉnh sửa 2 : sử dụng ràng buộc ngay bây giờ cho hai sự kiện với cùng một trình xử lý trên mỗi gnarf

Aircoded (nhưng đã được thử nghiệm trên trò chơi này )

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

Tôi đã tạo một plugin JQuery đơn giản cho việc này nếu có ai quan tâm.

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

Có lẽ bạn có thể bắt đầu setTimeoutcuộc gọi mousedownvà sau đó hủy cuộc gọi đó mouseup(nếu mouseupxảy ra trước khi hết thời gian chờ của bạn).

Tuy nhiên, có vẻ như có một plugin: longclick .

Đây là cách triển khai hiện tại của tôi:

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

Tôi đã viết một số mã để làm cho nó dễ dàng

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

Xem trên JSFiddle

Bây giờ bạn chỉ cần đặt thời gian giữ và thêm clickHoldsự kiện vào phần tử của mình

Thử cái này:

var thumbnailHold;

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

         } , 1000);
     return false;
});

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