jQuery .mousedown/up 光标移动导致失败

Question

我想通过在顶部添加一点边距来使我的网站上的div 在单击时"压抑"。我认为 .mousedown/up 会很好，除了用户在单击中途将鼠标移离div 的情况。在这种情况下，潜水会保持低沉，每次发生时都会从其原始位置进一步下降

http://jsfiddle.net/dLwovpd9/

$(document).ready(function() {
    $('#foo').mousedown(function() {
        $('#foo').css('margin-top', '+=2px')
    })
    $('#foo').mouseup(function() {
        $('#foo').css('margin-top', '-=2px')
    })
})

如何阻止这种情况发生？使用与 .mousedown 不同的方法更好吗？

Answer 1

我更改了您的代码，以便 mousedown 事件将按下的按钮存储在变量中，并更改了 mouseup 事件以处理整个文档。它将检查是否有按下的按钮，如果是，它将取消按下按钮。

http://jsfiddle.net/2mynzftt/

$(document).ready(function() {
    var depressedButton = null;
    $('#foo').mousedown(function() {
        depressedButton = $(this);
        depressedButton.css('margin-top', '+=2px')
    })
    $(document).mouseup(function() {
        if(depressedButton) depressedButton.css('margin-top', '-=2px')
        depressedButton = null;
    })
})

Answer 2

您可以有一个变量检查您是否单击了div。然后，如果您没有触发mouseup，但您离开了div（mouseleave事件），则执行与mouseup相同的操作。

$(document).ready(function() {
    var clicked = false;
    $('#foo').mousedown(function() {
        clicked = true;
        $('#foo').css('margin-top', '+=2px');
    })
    $('#foo').mouseleave(function() {
        if(clicked)
            $('#foo').css('margin-top', '-=2px');
        clicked = false;
    })
    $('#foo').mouseup(function() {
        if(clicked)
            $('#foo').css('margin-top', '-=2px');
        clicked = false;
    })
})

小提琴：http://jsfiddle.net/dLwovpd9/2/