- ベストアンサー
ブラウザの外にあるマウスの情報を取得する方法
例えば、googlemap だとDrag&Drop で地図をぐりぐりと動かすことが出来るのですが、その際にカーソルがブラウザの外に行っても地図はぐりぐりと動き続けますし、マウスボタンを離せばそれも認識して地図のスクロールは止まります。 つまり、ブラウザ外のマウスの座標とボタンイベントが取得できているのだと思いますが、これは当たり前のようでいて当たり前には出来ません。 ソースは読んでみましたが挫折しました。 どなたかこの技法について分かる方いらっしゃいましたら教えてください。
- svankmajer
- お礼率91% (11/12)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ブラウザ内でドラッグが始まった場合に限り ブラウザ外に行っても追っかけることが出来るようです。 下記のHTMLファイルを作成すると検証できます。 ページ内でクリックするとテキストボックスにX、Yの座標が表示されます ブラウザを小さくしてページ内でドラッグして ページ外でドロップするとページ外のXY座標が表示されます。 ページ外でドラッグ始めてページ内に来ても無反応です。 グーグルマップはonclickイベントのみでやっているようです。 <div>内にdivのサイズより大きいマップのimageを置いて マウスのオンクリックのポイントが基準位置から向かった方向の imageをAjaxの機能を利用してDLしているようです。 私も勉強中ですが・・・。 <html> <head><title> </title> </head> <body onclick='catchmouse();'> <form name="form1"> <input type='text' name='mX' value=''> <input type='text' name='mY' value=''> </form> </body> <script language="javascript"> <!-- function catchmouse() { form1.mX.value = event.x; form1.mY.value = event.y; } </script> </html>
その他の回答 (1)
- -untested- - obj.getPos = function(pnt){ obj.x = pnt.pageX ; obj.y = pnt.pageY ;} //.............................................. //.............................................. obj.handle = function(a, b){ if (document.onmouseup != b) var obj2 = document.onmouseup || null; document.onmouseup = b; }else{ var x = (!a)? Event.MOUSEDOWN : (a2)? Event.MOUSEMOVE : Event.MOUSEUP; b? document.captureEvents(pos) : document.releaseEvents(pos); }}
お礼
ご回答ありがとうございました。 が、私は力量不足でこのコードを使ったテスト環境を構築できませんでした。 <script> var obj = new Object(); obj.getPos = function(pnt){ obj.x = pnt.pageX ; obj.y = pnt.pageY ;} //.............................................. obj.handle = function(a, b){ if (document.onmouseup != b) { var obj2 = document.onmouseup || null; document.onmouseup = b; }else{ var x = (!a)? Event.MOUSEDOWN : (a2)? Event.MOUSEMOVE : Event.MOUSEUP; b? document.captureEvents(pos) : document.releaseEvents(pos); }} obj.handle(1, obj.getPos); // 1の部分は何入れていいのか全然わかってない </script> とやりました。 obj.xとobj.yにはonmouseupのタイミングで値が入ってくる、というところまでできましたが、一生かかっても通らない部分があります。 精進します。
お礼
ご回答ありがとうございました。 ドラッグアンドドロップ中にしか反応しないというのが 参考になりました。というか、そこの部分がスコーンと抜けた状態でこれまでずっと悩んできました。 サンプルソースはbodyタグを以下のようにして楽しませていただきました。 <body onclick='catchmouse();'onmousemove='catchmouse();'>