18

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>

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

完了mouseup時に発砲するにはどうすればよいですか、またはイベントを調べてマウスの左ボタンがオフになっていることを確認するにはどうすればよいですか？mousemovemousemove

4

7 に答える 7

25

これは私がよく使うパターンで、 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;
});
于 2009-12-15T19:26:39.503 に答える
5

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

$('#element').bind('mousedown.namespace', function(e) {
    $(document).one('mouseup', function() {
        callback_func();
        $(document).unbind('mousedown.namespace');
    });
 });
于 2010-11-23T10:38:05.593 に答える
1

私は同様の問題を抱えていましたが、これは私にとってはうまくいきました：

$(document).on("dragend", function(e){
  $(e.target).trigger("mouseup");
  e.preventDefault();
});
于 2015-07-22T07:05:37.030 に答える
1

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

于 2010-08-30T15:36:22.030 に答える
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 = $('<div id="mouse-drag-area"></div>');

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

    pointer-events:none;

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

于 2016-04-01T09:59:03.960 に答える
0

以下の CSS を使用してテキストを選択不可に設定すると、イベントも抑制されることがわかりましたmouseup。おそらく、これは他の人に役立つでしょう。

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
于 2012-09-18T18:29:18.163 に答える
0

私は KineticJS オブジェクトで同様の問題を抱えていました。問題を解決するdragend代わりにキネティックを使用します。mouseup

于 2014-01-02T16:36:28.357 に答える