Jak uruchomić mouseup po zakończeniu mousemove

Question

Jak uruchomić mouseup po zakończeniu mousemove

Wydaje się, że zdarzenia mouseup są wywoływane tylko wtedy, gdy nie są połączone z mousemove. Innymi słowy, wciśnij lewy przycisk myszy i puść, a mouseup zostanie uruchomiony. Ale jeśli przeciągniesz obraz, a następnie puścisz, nie zostanie uruchomiony mouseup. Oto przykład, który pokazuje to zachowanie:

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

Jeśli załadujesz to, a następnie klikniesz i puścisz, "UP" będzie alarmować. Jeśli jednak przeciągniesz, a następnie puścisz, nie zostanie uruchomiony żaden UP.

Jak mogę mieć mouseup fire gdy mousemove jest ukończone lub jak sprawdzić Zdarzenie mousemove, aby stwierdzić, że lewy przycisk myszy jest teraz wyłączony?

18

javascript jquery html javascript-events

Author: Yi Jiang, 2009-12-15

Source

7 answers

Nie zapomnij o przestrzeni nazw swoich wydarzeń, w przeciwnym razie wszystkie procedury obsługi zdarzeń będą niezwiązane:

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

5

Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-27 15:22:54

Od wersji JQuery 1.4 musisz zastąpić $('document') $(). W rzeczywistości używam tego do tworzenia menu w oknie jQuery UI, które wydaje się pułapkować zdarzenia mousemove. Więc po prostu zamieniam mój kontener div na $ () (który wygląda jak $('#myContainerDiv')). To też działa dobrze.

1

Author: James Ellis-Jones,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-30 15:36:22

Miałem podobny problem i to mi pomogło:

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

1

Author: Dustin Poissant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-22 07:05:37

Odkryłem, że gdy ustawiam mój tekst jako niewykrywalny za pomocą poniższego CSS, Zdarzenie mouseup jest również zahamowane - być może pomoże to komuś innemu.

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

0

Author: TimDog,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-18 18:29:18

Miałem podobny problem z obiektami KineticJS. Użycie dragend kinetic zamiast mouseup rozwiązało problem.

0

Author: Bill Hoag,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-02 16:36:28

Napotkałem ten sam problem. Nawet po dodaniu e.preventDefault() w programie obsługi mousedown, nadal nie jest to rozwiązane.

Wreszcie odkryłem, że jeśli wyłączę następujące kody w moim programie obsługi mousemove, mój program obsługi mouseup zostanie wywołany normalnie.

     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 to programowo utworzony element, który ma przerywaną ramkę, aby pokazać prostokątny obszar kliknięty-przeciągnięty myszką:

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

Wtedy zdałem sobie sprawę, że ten #mouse-drag-area element jest ponad oryginalnym elementem, który obsługuje zdarzenie mouseup. Więc po dodaniu następującej deklaracji css do #mouse-drag-area, jest ona posortowana:

    pointer-events:none;

Innymi słowy, najważniejsze jest to, dla którego elementu ustawiasz funkcję obsługi mouseup.

0

Author: gm2008,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-01 14:06:22

score 25 · Accepted Answer

Jest to wzór, którego używam Dużo , działa ogólnie bardzo dobrze na wszystkich rzeczach związanych z mousemove. Zdarzenie mouseup jest wiązane, gdy użytkownik kliknie mousedown, co zmusza go do odpalenia, gdy użytkownik puści przycisk myszy, bez względu na to, jak bardzo został przeniesiony.

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