Javascript Jquery：鼠标按下效果（按住左键时）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3977091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: mousedown effect (while left click is held down)
提问by Zebra
I need a function that executes a function while a button is pressed and stops executing when the button is let go
我需要一个在按下按钮时执行功能并在松开按钮时停止执行的功能
$('#button').--while being held down--(function() {
//execute continuously
});
回答by Yi Jiang
I believe something like this would work:
我相信这样的事情会奏效：
var timeout, clicker = $('#clicker');
clicker.mousedown(function(){
timeout = setInterval(function(){
// Do something continuously
}, 500);
return false;
});
$(document).mouseup(function(){
clearInterval(timeout);
return false;
});
See this demo: http://jsfiddle.net/8FmRd/
看这个演示：http: //jsfiddle.net/8FmRd/
回答by Tarjei Knutsen
A small modification to the original answer:
对原始答案的一个小修改：
$('#Clicker').mousedown(function () {
//do something here
timeout = setInterval(function () {
//do same thing here again
}, 500);
return false;
});
$('#Clicker').mouseup(function () {
clearInterval(timeout);
return false;
});
$('#Clicker').mouseout(function () {
clearInterval(timeout);
return false;
});
With the mouseout event on the Clicker it stops when you move your mouse out of the click area.
通过 Clicker 上的 mouseout 事件，当您将鼠标移出单击区域时，它会停止。
The reason why I suggest to do the same thing twice is to get a smoother effect. If you don't do it once before the timeout is set it will be a delay of, in this case, 500ms before something happens.
之所以建议同样的事情做两次，是为了获得更流畅的效果。如果在设置超时之前不执行一次，则在这种情况下，会延迟 500 毫秒，然后才会发生某些事情。
回答by Mapsy
Here's a pure JavaScript implementation of the supplied solutions which has extended support for touch screens. You supply the id, actionto perform (function(){}) and the interval(ms) to repeat the action. Note that this implementation will also execute the actionimmediately, rather than waiting for the intervalto lapse.
这是所提供解决方案的纯 JavaScript 实现，它扩展了对触摸屏的支持。您提供id,action以执行 ( function(){}) 和interval(ms) 以重复action. 请注意，此实现还将action立即执行，而不是等待interval失效。
// Configures an element to execute a function periodically whilst it holds the user's attention via a mouse press and hold.
function assertPeriodicPress(id, action, interval) {
// Listen for the MouseDown event.
document.getElementById(id).addEventListener('mousedown', function(ev) { action(); timeout = setInterval(action, interval); return false; }, false);
// Listen for mouse up events.
document.getElementById(id).addEventListener('mouseup', function(ev) { clearInterval(timeout); return false; }, false);
// Listen out for touch end events.
document.getElementById(id).addEventListener('touchend', function(ev) { clearInterval(timeout); return false; }, false);
}
回答by MajidTaheri
$.fn.click2=function(cb,interval){
var timeout;
if(!interval) interval=100;
$(this).mousedown(function () {
var target=this;
timeout = setInterval(function(){
cb.apply(target);
}, interval);
return false;
}).mouseup(function () {
clearInterval(timeout);
return false;
}).mouseout(function () {
clearInterval(timeout);
return false;
});
}
