ブラウザの外にあるマウスの情報を取得する方法

解決済

質問者：svankmajer
質問日時：2006/05/25 10:06
回答数：2件

例えば、googlemap だとDrag&Drop で地図をぐりぐりと動かすことが出来るのですが、その際にカーソルがブラウザの外に行っても地図はぐりぐりと動き続けますし、マウスボタンを離せばそれも認識して地図のスクロールは止まります。
つまり、ブラウザ外のマウスの座標とボタンイベントが取得できているのだと思いますが、これは当たり前のようでいて当たり前には出来ません。
ソースは読んでみましたが挫折しました。

どなたかこの技法について分かる方いらっしゃいましたら教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： X-trail_00
回答日時：2006/05/25 11:11

ブラウザ内でドラッグが始まった場合に限り

ブラウザ外に行っても追っかけることが出来るようです。
下記の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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
ドラッグアンドドロップ中にしか反応しないというのが
参考になりました。というか、そこの部分がスコーンと抜けた状態でこれまでずっと悩んできました。

サンプルソースはbodyタグを以下のようにして楽しませていただきました。
<body onclick='catchmouse();'onmousemove='catchmouse();'>

通報する

お礼日時：2006/05/25 21:53

No.2

回答者： noname#22259
回答日時：2006/05/25 12:35

- -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);
}}

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
が、私は力量不足でこのコードを使ったテスト環境を構築できませんでした。

<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のタイミングで値が入ってくる、というところまでできましたが、一生かかっても通らない部分があります。

精進します。