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

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解决方案).

提前致谢.

Answer 1

而不是倾听click,这样做:

1. 听取mousedown和mouseup.
2. 打开mousedown,执行操作并设置计时器,以便在一瞬间再次执行setTimeout.记住计时器句柄(返回值).
3. 当计时器熄灭并再次执行操作时,请再次安排它再次发生,再次通过setTimeout再次记住手柄.
4. 当您看到时mouseup,使用句柄取消未完成的计时器clearTimeout.

例:

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;
});

.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>

你在评论中说过:

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

这是因为我们只是mouseup按下按钮,所以当你发布它时,我们不会得到那个事件.愚蠢的错误对我而言.:-)

两种解决方案

1. 无论是听mouseup的document,或

2. 听取mouseleave按钮以及mouseup.

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

实施#1只是挂钩的事情mouseup上document,而不是.left, .right:

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;
});

.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>

实现#2只是添加mouseleave到mouseout处理程序的问题; 但请注意,即使我们在鼠标离开按钮后立即停止运动,按钮也会保持"推动"状态:

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;
});

.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>