Как заставить мышь выстрелить после завершения перемещения мыши

Question

Кажется, что события mouseup запускаются только тогда, когда они не связаны с движением мыши. Другими словами, нажмите на левую кнопку мыши и отпустите, и 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>

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

У меня была похожая проблема, и у меня это сработало:

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

Answer 4

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

Answer 5

Я столкнулся с той же проблемой. Даже после добавления 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.

Answer 6

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

Answer 7

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

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