javascript - Jquery 在鼠标按钮按住时自动递增 css 属性

Question

我正在努力创建一种功能，当有人按下并“按住”一个按钮时，该功能会不断增加元素的 css 属性。

像这样:

var timeoutId = 0;

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

function myFunction() {
 var left = parseInt($("#menuElem").css('left')) + 10;
 $("#menuElem").animate({
    'left' : left + 'px'
 });

}

我希望 myFunction 一次又一次地重复，直到触发 mouseup 或 mouseleave 事件。

干杯

Answer 1

根据 this SO question您无法检测键的当前向上或向下状态，只能监视相应的事件。

所以我猜你需要这样的东西

var mouseIsDown = false;

$('#button').mousedown(function(){
    mouseIsDown = true;
    incrementValue;
});

$('#button').mouseup(function(){
    mouseIsDown = false;
});

然后让那个函数像这样:

function incrementValue() {
    whatever++;
    if(mouseIsDown){
        setTimeout("incrementValue()", 20);
    }
}

鼠标按下时，mouseIsDown var 设置为 true，它开始一个循环，该循环继续递增(以您在 setTimeout() 中设置时间参数的任何时间间隔)直到 mouseIsDown为 false，这发生在 mouseup 上。