如何在 jQuery 中侦听单击并保持？

var timeoutId = 0;


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

编辑 : 每安迪修正... 谢谢！

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

假设您可以在 mousedown中开始一个 setTimeout调用，然后在 mouseup中取消它(如果 mouseup发生在您的超时完成之前)。

但是，似乎有一个插件: 长击。

Here's my current implementation:

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


}

编码(但在 这把小提琴上测试)

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

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

I made a simple JQuery plugin for this if anyone is interested.

Http://plugins.jquery.com/pressandhold/

我写了一些代码让它变得简单

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

Now you need just to set the time of holding and add clickHold event on your element

Try this:

var thumbnailHold;


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


} , 1000);
return false;
});


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