javascript Jquery中的鼠标按住事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16707170/
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
Mousehold event in Jquery
提问by user2310422
Basically, I have this image with left and right arrow button. This image, by default is the first frame I have extracted from some gif, the original gif contains 31 frames. My goal is when the users clicks the right arrow button, I want to display the next frame and so on... Everything is working perfectly as shown below code. However, I need to add some mousehold event so that when the user click and hold the mouse, I want to keep firing the next images. How can I achieve this?
基本上，我有这个带有左右箭头按钮的图像。这个图像，默认是我从一些gif中提取的第一帧，原始gif包含31帧。我的目标是当用户单击右箭头按钮时，我想显示下一帧等等......一切都很好，如下面的代码所示。但是，我需要添加一些 mousehold 事件，以便当用户单击并按住鼠标时，我想继续触发下一个图像。我怎样才能做到这一点？
$('#arrow_right').click(function (event) {
event.preventDefault();
var data_id = parseInt($(this).parent().find('#inner_wrap img').attr('data-id'));
if (data_id >= 1 && data_id <= 30) {
data_id = data_id + 1;
var avatar_num = $('#inner_wrap').html('<img id="avatar" data-id="' + data_id + '" src="img/avatar_test' + data_id + '.gif" width="90" height="200">');
}
});
回答by Zim84
Well you can use the mousedownevent to start a function that displays the gif-frame: http://api.jquery.com/mousedown/and then add another event handler for the mouseupevent that will stop that function. That function can be called via setInterval()in the mousedown-event for example and get stopped via clearInterval()in the mouseupevent.
那么您可以使用该mousedown事件来启动一个显示 gif-frame 的函数：http: //api.jquery.com/mousedown/，然后为mouseup将停止该函数的事件添加另一个事件处理程序。这个功能可以通过被称为setInterval()在mousedown-event例如，并且通过得到停止clearInterval()的mouseup事件。
This is an example that shows the principle:
这是一个显示原理的示例：
var interval;
$(button).addEventListener('mousedown',function(e) {
interval = setInterval(function() {
// here goes your code that displays your image/replaces the one that is already there
},500); // 500ms between each frame
});
$(button).addEventListener('mouseup',function(e) {
clearInterval(interval);
});
// Thank you, Timo002, for your contribution!
// This code will stop the interval if you move your mouse away from the button while still holding it.
$(button).addEventListener('mouseout',function(e) {
clearInterval(interval);
});
回答by Timo002
In addition of the answer of Zim84, I should also add this piece of code!
除了Zim84的回答，我还要加上这段代码！
$(button).addEventListener('mouseout',function(e) {
clearInterval(interval);
});
This will take care that if someone pushes the button (mousedown) and holds its mouse down and leaves (mouseout) the button, the interval is also cleared. Without this the interval does not stop in this particularly situation.
这将注意，如果有人按下按钮 ( mousedown) 并按住鼠标并离开 ( mouseout) 按钮，间隔也会被清除。没有这个，间隔不会在这种特殊情况下停止。
