Question

我想通过在顶部添加一个小边距来点击我的网站上的div'压下'。我认为.mousedown / up对此有好处，除非用户将鼠标移出div中间点击。在这种情况下，潜水会保持低压状态，并且每次发生时都会从原来的位置向下移动

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

小提琴： 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 cursor move导致失败

2 个答案: