jQueryは要素内でマウスを検出し、要素の外にマウスを移動します

Question

私は描画キャンバスに似た何かを持っています。キャンバスはフルスクリーンではないので、ブラシで描画しキャンバスの外に放すことができます。このようなもの：

$("#element").mousedown(function(){ 
    $(document).mouseup(function(){ 
    //do something 
    }); 
}); 

しかし、これはもちろん機能しません。多くの他のUI要素があり、UI要素をクリックするたびに状態を保存するため、プレーンな$（document）.mouseupは機能しません。

アイデア？

Answer 1

var isDown = false; 

$("#element").mousedown(function(){ 
    isDown = true; 
}); 

$(document).mouseup(function(){ 
    if(isDown){ 
     //do something 
     isDown = false; 
    } 
}); 

簡略化のため、isDownをグローバル名前空間に入れました。プロダクションでは、おそらくその変数のスコープを分離したいと思うでしょう。

Answer 2

うまくいけば、この小さな解決策が役立つことを願っています。あなたはここにアクションでそれを見ることができます。 http://jsfiddle.net/neopreneur/PR2yE/

$(document).ready(function(){ 
    var startMouseDownElement = null; 

    $('#element').mousedown(function(){ 
     // do whatever 
     //... 

     // set mousedown start element 
     startMouseDownElement = $(this); 
    }); 

    // handle bad mouseup 
    // $('#container, #container *').mouseup would be more efficient in a busy DOM 
    $('body *').mouseup(function(event){ 
     event.stopPropagation(); // stop bubbling 
     if($(this).attr('id') != $(startMouseDownElement).attr('id')){ 
      //oops, bad mouseup 
      alert('bad mouseup :('); 
     } 
    }); 
}); 

Answer 3

テキストが選択されている時には、上記の答えは動作しません。

修正が、それがバックアップだときにそれをマウスがダウンしているときに選択されてからテキストを停止し、再度有効にすることです：あなたのCSSに

：

.noselect { 
    /* Prevent text selection */ 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

次に、あなたのJS：

var myButtonDown=false; 

$('.ff', ffrw).mousedown(function() { 
    myButtonDown=true; 
    $('body').addClass('noselect'); 
    //Your code here 
}); 

$(document).mouseup(function() { 
    if (myButtonDown) { 
     myButtonDown = false; 
     $('body').removeClass('noselect'); 
    } 
}) 

Answer 4

GWTでのmikeとwaitingforatrainの回答の可能な実装。 HTMLのheadで は、マウスアップイベント（JavaScriptコード）を管理：

var mouseUpHook = false; 
    $(document).mouseup(function() { 
     if (mouseUpHook) { 
      mouseUpHook(null); 
      mouseUpHook = false; 
     } 
    }); 

は、カスタムウィジェットクラスはMouseDownHandlerとMouseUpHandlerを実装し、マウスイベント（Javaコード）を受け取るためにあなたのコンストラクタでこれらの行を追加してみましょう：

addDomHandler(this, MouseDownEvent.getType()); 
    addDomHandler(this, MouseUpEvent.getType()); 

最後に、カスタムウィジェットクラス（JavaとJavaScriptコード）でこれらのメソッドを追加：

@Override 
public void onMouseUp (MouseUpEvent event) { 
    removeMouseUpHook(); 

    // ... do something else 
} 

private native void hookMouseUp() /*-{ 
    $wnd.$('body').addClass('noselect'); 
    var myThis = this; 
    $wnd.mouseUpHook = function() { 
     myThis.@your.custom.widget.class.full.qualified.Name::onMouseUp(Lcom/google/gwt/event/dom/client/MouseUpEvent;)(null); 
    }; 
}-*/; 

private native void removeMouseUpHook() /*-{ 
    $wnd.$('body').removeClass('noselect'); 
}-*/; 

@Override 
public void onMouseDown (MouseDownEvent event) { 
    hookMouseUp(); 

    // ... do something else 

    event.preventDefault(); 
} 

最終ラインがに便利です画像のドラッグを防止します。事実、ユーザー選択：どれも十分ではありません。

Answer 5

クリック可能な要素がたくさんある場合は、グローバルなマウスキャッチャーを作成し、クリックされた要素のmousedowns内でマウスアップコードを設定したいと思うでしょう。ここに私が使ったコードがあります。

var MouseCatcher=function() 
    { 
     this.init=function() 
     { 
      var mc = this; 
      $(document).bind({ 
       mouseup:function(e) 
       { 
        mc.mouseup(); 
       } 
      }); 
     } 
     this.mouseup=function() 
     { 
      return false; 
     } 
    } 
    var mouseCatcher = new MouseCatcher(); 
    mouseCatcher.init(); 



    $('#clickableElement').bind({ 
     mousedown: function(e) 
     { 
      console.log('mousedown on element'); 

      mouseCatcher.mouseup=function() 
      { 
       console.log('mouseup called from MouseCatcher'); 
       this.mouseup = function(){return false;} 
      } 

     }, 
     mouseup:function(e) 
     { 
      //mouseup within element, no use here. 
     } 
    });