jQuery .mousedown/up cursor move вызывает ошибки

Question

Я хочу сделать div на моем сайте «нажатием» при нажатии, добавив небольшое поле вверх. Я думал, что mousedown/up будет хорошо для этого, за исключением случая, когда пользователь перемещает мышь с середины щелчка. В этом случае, погружение остается в депрессии и будет двигаться вниз еще дальше от своей первоначальной позиции каждый раз, когда это происходит

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

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