Как заставить mouseup стрелять однажды mousemove завершенный
Кажется, что события mouseUp только запущены, когда они не в сочетании с mousemove. Другими словами, снизьте на левой кнопке мыши и отпустите, и mouseup запущен. Но если Вы перетаскиваете через изображение и затем отпускаете, никакой mouseup не запущен. Вот пример, который показывает это поведение:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="Out">
<img id="Img" src="http://sstatic.net/so/img/logo.png" width=500>
</div>
<script language=JavaScript>
$(function() {
$(document).bind("mouseup",function() {alert("UP");});
//$("#Out").bind("mouseup",function() {alert("UP");});
//$("#Img").bind("mouseup",function() {alert("UP");});
});
</script>
Если Вы загрузите это и щелчок и отпустите, "ТО" предупредит. Однако, если Вы перетаскиваете и затем отпускаете, нет запущен.
Как у меня может быть огонь mouseup, когда mousemove завершается, или как я могу осмотреть событие mouseMove, чтобы решить, что левая кнопка мыши теперь прочь?
2 ответа
This is a pattern I use alot, works generally very well on all things relating to mousemove. The mouseup event is binded when the user clicks mousedown, this forces it to fire when the user lets go of the mouse button, no matter how much it's moved.
$('#element').mousedown(function(e) {
// You can record the starting position with
var start_x = e.pageX;
var start_y = e.pageY;
$().mousemove(function(e) {
// And you can get the distance moved by
var offset_x = e.pageX - start_x;
var offset_y = e.pageY - start_y;
return false;
});
$().one('mouseup', function() {
alert("This will show after mousemove and mouse released.");
$().unbind();
});
// Using return false prevents browser's default,
// often unwanted mousemove actions (drag & drop)
return false;
});
Начиная с JQuery 1.4 вам необходимо заменить $('document') на $(). Фактически, я использую это, чтобы создать меню внутри диалогового окна пользовательского интерфейса JQuery, которое, кажется, перехватывает события перемещения мыши. Поэтому я просто заменяю $() своим div-контейнером (который выглядит примерно как $('#myContainerDiv')). Кажется, это тоже работает нормально.