Question

我有一种情况，我点击按钮，它会执行以下操作：

var pos = 1;

$('.right').click(function(){    
    $('.box').css({'left': pos++ });
});

$('.left').click(function(){    
    $('.box').css({'left': pos-- });
});

.box{
    background-color: gray;
    height:20px;
    width: 20px;
    left: 0;
    position: relative;
    margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="left" button-held>Left</button>
<button class="right" button-held>Right</button>
<div class="box"></div>

我需要的是当用户点击按钮并按下按钮时，它会多次执行此操作，直到按钮被释放。

关于如何做到这一点的任何想法？我已经在互联网上搜索了一段时间，但由于有很多关于事件的问题，我很难找到答案，如果有人想要查看它，我也找到了一个Angular解决方案（Angular solution）。

提前致谢。

Answer 1

而不是收听click，请执行以下操作：

倾听mousedown和mouseup。
在mousedown上，执行操作并设置计时器，以便通过setTimeout稍后再次执行此操作。记住计时器句柄（返回值）。
当计时器熄灭并再次执行操作时，请再次通过setTimeout安排它再次发生，再次记住手柄。
当您看到mouseup时，请使用clearTimeout的句柄取消未完成的计时器。

示例：

＆＃13;

var pos = 1;
var handle = 0;

function move(delta) {
    $('.box').css({'left': pos += delta });
}
function moveRight() {
    move(1);
    clearTimeout(handle); // Just in case
    handle = setTimeout(moveRight, 50);
}
function moveLeft() {
    move(-1);
    clearTimeout(handle); // Just in case
    handle = setTimeout(moveLeft, 50);
}

$('.right').on("mousedown", moveRight);
$('.left').on("mousedown", moveLeft);
$('.left, .right').on("mouseup", function() {
    clearTimeout(handle);
    handle = 0;
});

＆＃13;

.box{
    background-color: gray;
    height:20px;
    width: 20px;
    left: 0;
    position: relative;
    margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="left" button-held>Left</button>
<button class="right" button-held>Right</button>
<div class="box"></div>

＆＃13;

在评论中你说过：

我刚注意到其中的一个错误，如果我按下其中一个按钮，然后在按住它的同时滑出它然后释放它，它会无限期地移动盒子，直到再次按下其中一个按钮，你可能知道为什么会这样吗？

这是因为我们只是在按钮上听mouseup，所以当你发布它时，我们就不会得到那个事件。愚蠢的错误对我而言。： - ）

两种解决方案：

在mouseup上收听document，或
在按钮上收听mouseleave以及mouseup。

我认为＃1可能是最好的，特别是因为当我在Chrome上尝试它时，它甚至优雅地处理了我将鼠标按下按钮的情况，然后将其完全滑出浏览器窗口（！）并释放它。 Chrome仍向我们提供了mouseup个`文档。： - ）

实施＃1只是在mouseup而不是document上挂钩.left, .right：

＆＃13;

var pos = 1;
var handle = 0;

function move(delta) {
    $('.box').css({'left': pos += delta });
}
function moveRight() {
    move(1);
    clearTimeout(handle); // Just in case
    handle = setTimeout(moveRight, 50);
}
function moveLeft() {
    move(-1);
    clearTimeout(handle); // Just in case
    handle = setTimeout(moveLeft, 50);
}

$('.right').on("mousedown", moveRight);
$('.left').on("mousedown", moveLeft);
// ONLY CHANGE is on the next line
$(document).on("mouseup", function() {
    clearTimeout(handle);
    handle = 0;
});

＆＃13;

.box{
    background-color: gray;
    height:20px;
    width: 20px;
    left: 0;
    position: relative;
    margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="left" button-held>Left</button>
<button class="right" button-held>Right</button>
<div class="box"></div>

＆＃13;

实现＃2只需将mouseleave添加到mouseout处理程序;但请注意，按钮保持按下＆＃34;推动＆＃34;即使我们在鼠标离开按钮后立即停止运动，也会出现外观：

＆＃13;

var pos = 1;
var handle = 0;

function move(delta) {
    $('.box').css({'left': pos += delta });
}
function moveRight() {
    move(1);
    clearTimeout(handle); // Just in case
    handle = setTimeout(moveRight, 50);
}
function moveLeft() {
    move(-1);
    clearTimeout(handle); // Just in case
    handle = setTimeout(moveLeft, 50);
}

$('.right').on("mousedown", moveRight);
$('.left').on("mousedown", moveLeft);
// ONLY CHANGE is on the next line
$('.left, .right').on("mouseup mouseleave", function() {
    clearTimeout(handle);
    handle = 0;
});

＆＃13;

.box{
    background-color: gray;
    height:20px;
    width: 20px;
    left: 0;
    position: relative;
    margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="left" button-held>Left</button>
<button class="right" button-held>Right</button>
<div class="box"></div>

＆＃13;

Answer 2

这样的东西？你去吧

var pos = 1;

$('.right').mousedown(function(){    
    myVar = setInterval(function(){ $('.box').css({'left': pos++ }); }, 100);
});
$('.right').mouseup(function(){    
    clearInterval(myVar);
});
$('.left').mousedown(function(){    
    myVar = setInterval(function(){ $('.box').css({'left': pos-- }); }, 100);
});

$('.left').mouseup(function(){    
    clearInterval(myVar);
});

使用JQuery按下按钮或锚点时触发多个单击事件

2 个答案: