Как заставить mouseup загораться после завершения mousemove

Кажется, что события mouseup запускаются только в том случае, если они не связаны с mousemove. Другими словами, нажмите на левую кнопку мыши и отпустите, и мышь будет запущена. Но если вы перетащите изображение, а затем отпустите, стрелка мыши не будет запущена. Вот пример, который показывает это поведение:

<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>

Если вы загрузите это и нажмите и отпустите, появится сообщение "UP". Однако, если вы перетащите, а затем отпустите, UP не будет запущен.

Как я могу запустить firewall при завершении mousemove или как я могу проверить событие mousemove, чтобы определить, что левая кнопка мыши выключена?

Ответ 1

Это образец, который я использую много, работает в целом очень хорошо на всех вещах, связанных с mousemove. Событие mouseup привязывается, когда пользователь щелкает мышью, это заставляет его срабатывать, когда пользователь позволяет перейти от кнопки мыши, независимо от того, сколько она перемещалась.

$('#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 default,
    // often unwanted mousemove actions (drag & drop)
    return false;
});

Ответ 2

Не забудьте пропустить пробелы в своих событиях, иначе все обработчики событий будут несвязаны:

$('#element').bind('mousedown.namespace', function(e) {
    $(document).one('mouseup', function() {
        callback_func();
        $(document).unbind('mousedown.namespace');
    });
 });

Ответ 3

С JQuery 1.4 вам нужно подставить $('document') для $(). На самом деле, я использую это, чтобы создать меню внутри диалогового окна JQuery UI, который, похоже, захватывает события mousemove. Поэтому я просто подставляю свой контейнер div для $() (который выглядит примерно как $('# myContainerDiv')). Кажется, что это тоже хорошо работает.

Ответ 4

У меня была аналогичная проблема, и это сработало для меня:

$(document).on("dragend", function(e){
  $(e.target).trigger("mouseup");
  e.preventDefault();
});

Ответ 5

Я обнаружил, что когда я устанавливаю свой текст как невыбираемый, используя нижеприведенный CSS, событие mouseup также блокируется - возможно, это поможет кому-то другому.

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

Ответ 6

У меня была аналогичная проблема с объектами KineticJS. Использование кинетического dragend вместо mouseup решило проблему.

Ответ 7

Я столкнулся с той же проблемой. Даже после добавления e.preventDefault() в обработчик mousedown он все еще не разрешен.

Наконец, я обнаружил, что если я отключу следующие коды в обработчике mousemove, мой обработчик mouseup вызывается нормально.

     mouseDragArea.css({
         top: dragAreaPos.y + 'px',
         left: dragAreaPos.x + 'px',
         width: Math.abs(mouseCurPos.x - mouseClickPos.x) + 'px',
         height: Math.abs( mouseCurPos.y - mouseClickPos.y ) + 'px'
     });

mouseDragArea - это программно созданный элемент, который имеет пунктирную границу для отображения прямоугольной области, перетаскиваемой мышью мышью:

    mouseDragArea = $('<div id="mouse-drag-area"></div>');

Затем я понял, что этот элемент #mouse-drag-area - это ВЫШЕ исходный элемент, который обрабатывает событие mouseup. Поэтому, добавив следующую декларацию css в #mouse-drag-area, она сортируется:

    pointer-events:none;

В другом слове, суть состоит в том, к какому элементу вы настраиваете обработчик mouseup.