【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

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

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

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

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

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

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

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


精進します。

お礼日時:2006/05/25 22:09

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qマウスをブラウザの外に出したら、イベント・・・

マウスをブラウザの外(または<table>の外)に出したら、イベントを発動したい。(alert等)
<table onmouseout="javascript:alert('出たよ!')">
とかやると、<table>内の<td>や<tr>から外に出ただけで、イベントが発動してしまいます。
<body onmouseout="javascript:alert('出たよ!')">
これでも同じです。
ブラウザ(または<table>)の外に出た時だけに発動させたいのです。
どうすればよいのでしょうか?

ちなみにIEのみの動作で考えてくれれば結構です。
よろしくお願いします。

Aベストアンサー

以下のソースをテストしてみてください。こちらではテスト済みです。
細かいことを言うと、ブラウザの外ではなく、描画領域の外に出た時点で
アラートが表示されちゃいますが。


<HTML>
<BODY ID="PARENTS">
<TABLE>
<TR>
<TD>テスト</TD>
</TR>
</TABLE>
</BODY>
<SCRIPT FOR="PARENTS" EVENT="onmouseout">
if(event.x == -1) alert('Out');
</SCRIPT>
</HTML>

Qjavascriptにてonclickを無効

javascriptにてonclickを無効にしたい

下記のように、onclickイベントキャンセルを書きましたが、
onclickのjavascriptが実行されます。
何かヒントはありませんか?


<html>
<head>
<script language="JavaScript">

document.onclick = function(e) {
event.returnValue = false;
}
</script>
</head>
<body>
<a href="a.htm" onclick="alert('onclick');">onclick有り</a>
<a href="a.htm">onclick無し</a>
</body>
</html>

※環境 Windows2000(sp4)+ie6(sp1)

Aベストアンサー

event.returnValue = false についてはNo1様がすでにご指摘の通りです。

ご質問は、ドキュメントレベルででイベントを取得してキャンセルしたいという意図でしょうか?

バブリングの伝播順だと要素のonclickイベントが発生してからドキュメントへ伝播するので、仮にキャンセルが可能だったとしても無理ということになります。
http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20addEventListener%28%29

fx系であれば、documentでキャプチャリングフェーズでイベントを取得して、stopPropagation()で伝播を停止することで、ご質問で意図しているようなことは可能ですが、IEはこの仕組みに対応していないようです。
http://java.sun.com/j2se/1.5.0/ja/docs/ja/guide/plugin/dom/org/w3c/dom/events/Event.html#stopPropagation()

IE9からはできるのかも知れません。(ちゃんと調べてませんけど)
http://msdn.microsoft.com/en-us/library/ff975245(v=VS.85).aspx


IE6の場合だと、最初に要素をサーチしてonclickが設定されていたらキャンセルするとかの方法でもよいのなら可能でしょう。(atachEventで設定されているものは拾えませんが)

というか、HTMLソースを直接書き替えると言う単純な方法ではダメなのでしょうか?

event.returnValue = false についてはNo1様がすでにご指摘の通りです。

ご質問は、ドキュメントレベルででイベントを取得してキャンセルしたいという意図でしょうか?

バブリングの伝播順だと要素のonclickイベントが発生してからドキュメントへ伝播するので、仮にキャンセルが可能だったとしても無理ということになります。
http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20addEventListener%28%29

fx系であれば、documentでキャプチャリングフェーズでイベントを取得して、stopPropagation()で伝播を停...続きを読む

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

Qブラウザの×ボタン(閉じるボタン)押下時のイベントをひろいたい

javaScriptでブラウザの閉じるボタン(×ボタン)を押したときに、functionを走らせたいのですがうまくいきません。onunloadで以下の処理を行っています。


if(event.clientX <= -8980 && event.clientY <= -9000 || event.clientX >= 32700 && event.clientY >= 32700) {
 //ブラウザ閉じられたときの処理
}
閉じるボタンを押してなくても走ってしまったり、不安定なのですが、×ボタン押下時のイベントの拾い方をどなたかご教授ください。よろしくお願いします。

Aベストアンサー

すでにお気づきかも知れませんが、下記URLの掲示板にヒントが載ってました。
WSH利用者さんのソースが、なかなか良いみたいです。

-- 以下、引用 --
function window.onbeforeunload() {
  if(((event.clientX > document.body.clientWidth) && (event.clientY<0)) || event.altKey){
    閉じたときの処理();
  }
}
-- --

参考URL:http://forums.microsoft.com/MSDN-JA/ShowPost.aspx?PostID=559017&SiteID=7

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qhtmlのfileタグに自動で値を入れる方法

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉の策になっています…。

とりあえず(だめだとは思っていたのですが)
<input type="file" value="ファイルパス" name="filepath">
と直書きにしてみたり
document.all.filepath.value = "ファイルパス";
などとしてみたりしましたがだめでした…。
W3C勧告の使用上はvalueでファイルパスを指定できるようになっているようなのですが、現在の一般的なブラウザでは禁止されているようですね。

このような場合、何らかの方法でfileにファイルパスを自動入力することはできますでしょうか?
もしできない場合、何らかの方法で実現する方法はありますでしょうか?よろしくお願いします。

ちなみに実現できればいい環境は
WinXP環境のIE6です。言語はクライアント言語はJavaScriptのみで、という条件付です。
できないかもしれないのですが、こういうのって必要になるときもあるよなーなどと思っており、もしかしたら解決方法があるかもしれないと思い質問しました。よろしくお願いします。

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉...続きを読む

Aベストアンサー

やっぱ無理じゃないでしょうか。
なにか裏ワザ的な方法で一時的にできたとしても、いつか直されるかもしれないのでおいそれとは使えないし。

>W3C勧告の使用上はvalueでファイルパスを指定できるようになっている
→参考URL 「ユーザが明示的に送信を求めたファイル以外のものは送ってはいけない」とあります。

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#forms-security

QJavaScript でキーを送る

JavaScript でキーを送る
のはどうしたらいいのでしょうか。
キーボードからではなく、自動的に任意のキーを押させたいのです。


// aキーのkeydownイベントを起こす
var _e = document.createEvent("KeyboardEvent");

_e.initKeyEvent("keydown", true, true, null, false, false, false, false, 65, 0);
document.getElementById("dummy").dispatchEvent(_e);

いろいろ検索して上記のも試しましたが、IE8では動作が確認できませんでした。
IEじゃ無理なんでしょうか。

Aベストアンサー

よくわかんないけど…

どうせIEは独自仕様だろうと、少し調べてみました。
どうやらこれらしい。(↓)
http://msdn.microsoft.com/ja-jp/library/ms536423(en-us,VS.85).aspx

手元にIE6しかないので、IE6でのみ確認。
<html>
<head><title>test</title>
<script type="text/javascript">
function test(evt) {
var e = evt.srcElement;
alert(e.tagName + ' / ' + evt.keyCode);
}

function fire() {
var obj = document.createEventObject();
obj.keyCode = 65;
document.body.fireEvent("onkeydown", obj);
}
</script>
</head>
<body onkeydown="test(event)">
<input type="button" value="発生" onclick="fire()">
</body>
</html>

>キーボードからではなく、自動的に任意のキーを押させたいのです。
でもkeydownそのものをシュミレートしなくてもよさそうな気もしますが…?(その結果のほうを実行/操作すればよさそう)

よくわかんないけど…

どうせIEは独自仕様だろうと、少し調べてみました。
どうやらこれらしい。(↓)
http://msdn.microsoft.com/ja-jp/library/ms536423(en-us,VS.85).aspx

手元にIE6しかないので、IE6でのみ確認。
<html>
<head><title>test</title>
<script type="text/javascript">
function test(evt) {
var e = evt.srcElement;
alert(e.tagName + ' / ' + evt.keyCode);
}

function fire() {
var obj = document.createEventObject();
obj.keyCode = 65;
document.body.fireEvent("on...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q始めとする、初めとする どちらが正しいのでしょうか?

日本をはじめとするアジア諸国は。。。
のような使い方をする際の「はじめとする」は
「始めとする」と「初めとする」のどちらの表現の方が正しいのでしょうか?
日本語に詳しい方がおられましたら教えていただきたくお願いいたします。

Aベストアンサー

どちらでもOKです。
NHKではこうした揺らぎのある表現については
ひらがなが望ましいとして、ニュースの字幕など
ではそのように取り扱っています。

QIPアドレスの変わるタイミング

固定IPアドレスがあります。
一方多くの方は固定IPアドレスを利用していないので動的IPアドレスとなるはずです。
プロバイダから接続する度に違うIPアドレスが割り当てられるということと思います。
しかし、実際は何日も何ヶ月も同じIPアドレスになっています。
現実にはどのタイミングで変わるのでしょうか?
あるいは現実には変わらないのでしょうか?

Aベストアンサー

http://oshiete.goo.ne.jp/qa/6834003.html

プロバイダによる、としか。
DHCPだと、リース期間の半分が過ぎた時点で更新要求を出します。
普通は、更新要求には既存のIPアドレスを希望として出しますのでほぼ通ります。
サーバ側も、リース期間中での同じMACアドレスからの要求には同じIPアドレスを返すようにしてある事が一般的です。実装により異なるかもしれません。
リース期間関係無しにMACアドレスに対してIPアドレスを固定で割り振っているようなプロバイダもあるかもしれません。クライアント側は動的IPアドレスのつもりでも実際には固定で運用されているような状態ですね。


ただ、プロバイダによりリース期間に違いがあります。某社は72時間だそうですから、モデムとルータの電源を1日ぐらい切っておいたところでIPアドレスは変動しないようです。


人気Q&Aランキング