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

Question

我想在我的网站 'depress' 上添加 divs，方法是在顶部添加一个小边距。我认为 .mousedown/up 对此有好处，除非用户将鼠标从 div 中单击的位置移开。在这种情况下，dive 会保持低位，并且每次发生时都会从其原始位置进一步向下移动

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

如果您点击了 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;
    })
})

Fiddle: http://jsfiddle.net/dLwovpd9/2/

Answer 2

我更改了您的代码，以便 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;
    })
})

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

jQuery .mousedown/up cursor move causes fail

jquery

mousedown