如何检测Jquery中div的长按？
当用户在div上按下2 seconds时，我想执行一些function。
可能吗 ？
这是我的代码，用于检测div上的点击
$('div').mousedown(function() { });
只需观察mousedown和mouseup并计算差异。 这是一个例子 。
(function() { // how many milliseconds is a long press? var longpress = 3000; // holds the start time var start; jQuery( "#pressme" ).on( 'mousedown', function( e ) { start = new Date().getTime(); } ); jQuery( "#pressme" ).on( 'mouseleave', function( e ) { start = 0; } ); jQuery( "#pressme" ).on( 'mouseup', function( e ) { if ( new Date().getTime() >= ( start + longpress ) ) { alert('long press!'); } else { alert('short press!'); } } ); }());
添加一个油门，只允许在mousedown 2秒后发生点击。
var timer; $('div').on("mousedown",function(){ timer = setTimeout(function(){ alert("WORKY"); },2*1000); }).on("mouseup mouseleave",function(){ clearTimeout(timer); });
编辑：我也添加了mouseleave，因为如果鼠标离开元素然后触发mouseup，它将不会停止计时器。
我知道这个问题现在已经很老了，但我正在寻找类似的东西，并发现Buley的答案接近我所需要的。 我想我会发布我用它完成的function，让它在没有鼠标的情况下运行，有点像Android longtouch。
// Set the duration of the long press and declare a couple variables var longpress = 1000; var start; var divMouseDown; // Check for mousedown on the element of choice $("#element").on('mousedown', function(e){ // Get the time it was clicked start = new Date().getTime(); // See if mouse is still being held down after the longpress duration divMouseDown = setTimeout(function(){ // What we want to happen when mouse is clicked and held for 1 second }, longpress); // If the mouse leaves the element or is released before the long touch event, // reset variables and stop the function from triggering $("#element").on('mouseup mouseleave', function(){ if (divMouseDown) { clearTimeout(divMouseDown); } start = 0; e.stopPropagation(); } ); } );
您可以使用以下代码（在JSFiddle中测试）：
$('#foo').mousedown(function(){ $(this).data('lastPressed', new Date().getTime()); }).mouseup(function(){ var lastPressed = $(this).data('lastPressed'); if (lastPressed){ var duration = new Date().getTime() - lastPressed; $(this).data('lastPressed', false); if (duration > 2000) { alert('Your click lasted more than 2 seconds.'); } else { alert('Your click lasted less than 2 seconds.'); } } }).mouseout(function(){ $(this).data('lastPressed', false); });
升级和合并编辑和Kevin B回复你可以拥有一个function齐全的多重div，捕捉器：
// Global delta msec timeout var delta = 1500; $("#foo").on('mousedown', function(event) { var thisElement = $(event.currentTarget); var deltaTimer = setTimeout(function(){ console.log('long press!'); thisElement.removeData('startTimestamp'); }, delta); thisElement.data('startTimestamp', new Date().getTime()); thisElement.data('timer', deltaTimer); }).on('mouseleave', function(event) { var thisElement = $(event.currentTarget); clearTimeout(thisElement.data('timer')); thisElement.removeData('startTimestamp'); thisElement.removeData('timer'); }).on('mouseup', function(event) { var thisElement = $(event.currentTarget); var startTimestamp = thisElement.data('startTimestamp'); clearTimeout(thisElement.data('timer')); if (startTimestamp !== undefined && !isNaN(parseInt(startTimestamp))) { if (new Date().getTime() >= (startTimestamp + delta)) console.log('long press!'); else console.log('short press!'); } thisElement.removeData('startTimestamp'); thisElement.removeData('timer'); });
在问这个问题后的两年里，发明了一个名为jQuery Finger的精彩插件：
http://ngryman.sh/jquery.finger/
$('div').on('press', function(e) { console.log(this, e); });
短按和长按事件 – 长按时禁止短按
//from e-OS menu script var longpress = 800; var start; var timer; //short press - show e-OS system menu //long press - show e-OS settings $( "#e-OS-menu" ).on( 'mousedown', function( e ) { start = new Date().getTime(); timer = setTimeout(function(){ console.log('long press!'); }, longpress) }).on( 'mouseleave', function( e ) { start = 0; clearTimeout(timer); }).on( 'mouseup', function( e ) { if ( new Date().getTime() < ( start + longpress ) ) { clearTimeout(timer); console.log('short press!'); } });
由于mousedown您可以在检测到div上的点击时获取时间戳。 同样，您可以通过mouseup检测单击释放时获取时间戳。
然后，您需要比较这两个时间戳，如果它们大于2秒（或2000毫秒），则执行您的function。
此解决方案在您设置的时间后执行操作。 如果您使用鼠标离开按下的元素，它也会取消操作。
var longpress={ pressed:false, longpressed:false, presstime:1000 }; $('#element').on( 'mousedown' , function( event ) { longpress.longpressed=false; longpress.pressed=true; longpress.timeout=setTimeout(function() { longpress.longpressed=true; //Long press action here! },longpress.presstime); }).on( 'mouseup' , function( event ) { clearTimeout(longpress.timeout); if (!longpress.longpressed && longpress.pressed) { longpress.pressed=false; //Short press action here! } }).on('mouseleave', function( event ) { clearTimeout(longpress.timeout); longpress.pressed=false; });
简单。 不需要长时间不必要的编码。
(function(){ // how many milliseconds is a long press? var offset = 500; $(".button").on('mousedown', function(e){ // holds the start time $(this).data('start',new Date().getTime()); $(this).addClass("selected"); }).on('mouseup', function(e){ if (new Date().getTime() >= ($(this).data('start') + offset)){ //alert('ur click lasted for over 2 secs'); $(this).addClass("selected"); }else{ $(this).removeClass("selected"); } }).on('mouseleave', function(e){ start = 0; //you can add destroy lingering functions on mouse leave }); }());