18


11

mousemoveが完了したらmouseupを起動する方法

mouseupイベントは、mousemoveと連動していない場合にのみ発生するようです。 つまり、マウスの左ボタンを押して放すと、mouseupが起動します。 しかし、画像上でドラッグしてから離すと、マウスアップは発生しません。 この動作を示す例は次のとおりです。

    $(function() {
        $(document).bind("mouseup",function() {alert("UP");});
        //$("#Out").bind("mouseup",function() {alert("UP");});
        //$("#Img").bind("mouseup",function() {alert("UP");});
    });

これをロードし、クリックして離すと、「UP」が警告を出します。 ただし、ドラッグしてから離すと、UPは発生しません。

mousemoveが完了したときにmouseupを起動する方法、またはmousemoveイベントを調べて、マウスの左ボタンがオフになったことを確認する方法を教えてください。

7 Answer


25


これは私が_alot_を使用するパターンであり、一般的にmousemoveに関連するすべてのもので非常にうまく機能します。 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;
});


5


イベントの名前空間を忘れないでください。そうしないと、すべてのイベントハンドラーがバインド解除されます。

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


1


JQuery 1.4では、$()を$( 'document')に置き換える必要があります。 実際、私はこれを使用して、jQuery UIダイアログ内にメニューを作成していますが、これはmousemoveイベントをトラップしているようです。 したがって、$()をコンテナーdivに置き換えるだけです($( '#myContainerDiv')のようになります)。 これもうまくいくようです。


1


私は同様の問題を抱えていて、これは私のために働きました:

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


0


下のCSSを使用してテキストを選択不可に設定すると、「mouseup」イベントも禁止されることがわかりました。これはおそらく他の人の助けになるでしょう。

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


0


KineticJSオブジェクトでも同様の問題が発生していました。 「mouseup」の代わりにkineticの「dragend」を使用すると、問題が解決しました。


0


同じ問題が発生しました。 mousedownハンドラに `e.preventDefault()`を追加した後でも、解決されません。

最後に、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 = $('');

そして、この `#mouse-drag-area`要素がmouseupイベントを処理する元の要素の上にあることに気付きました。 したがって、次のcss宣言を `#mouse-drag-area`に追加した後、ソートされます:

    pointer-events:none;

別の言い方をすれば、重要なのは、mouseupハンドラーを設定する要素についてです。