我如何在jQuery中监听点击并保持？

Question

我希望能够在用户点击按钮时触发事件,然后将该点击保持1000到1500毫秒.

是否有jQuery核心功能或已启用此功能的插件？

我应该自己动手吗？我应该从哪里开始？

Answer 1

var timeoutId = 0;

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

编辑:每个AndyE校正...谢谢!

编辑2:现在使用绑定为每个gnarf具有相同处理程序的两个事件

Answer 2

Aircoded(但在这个小提琴上测试)

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

Answer 3

如果有人感兴趣,我为此制作了一个简单的JQuery插件.

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

Answer 4

大概你可以启动一个setTimeout电话mousedown,然后取消它mouseup(如果mouseup在你的超时完成之前发生).

但是,看起来有一个插件:longclick.