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

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

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

A 回答 (2件)

以下のソースをテストしてみてください。

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


<HTML>
<BODY ID="PARENTS">
<TABLE>
<TR>
<TD>テスト</TD>
</TR>
</TABLE>
</BODY>
<SCRIPT FOR="PARENTS" EVENT="onmouseout">
if(event.x == -1) alert('Out');
</SCRIPT>
</HTML>
    • good
    • 0
この回答へのお礼

有り難うございます。
問題なく動作いたします。
 if(event.x == -1)
なんて書き方知りませんでした。
やはり、単語不足ですね。。
勉強になりました。

お礼日時:2002/01/11 19:23

<TD>から出ただけで<table>までイベントが発生してしまうとのこ


とですが、これを防ぐ方法が無いわけでは有りません。でも、私が
実際すこしやってみたところ、別の問題が出ました。

<html><body onmouseout="alert('Event');">
<table bgcolor=red border=1>
<tr><td>Sample</td></tr>
</table></body></html>

ためしに、上のHTMLで
「<body>の中で<table>の外(ウインドウ内白い部分)」から
「<table>の中(赤いところ)」へマウスを動かしてみてください。
見た感じはただ<table>の中にカーソルが入っただけで、
onmouseoutイベントが発生するような状況ではないように思えます。
しかし、実際は「<body>からマウスが出た」とブラウザが判断して
いるのです。

実は、<table>の部分は<body>の領域の外としてブラウザに処理さ
れているのです。同様に、<table>の領域はセル(<td>)とセルと
の隙間であって、<td>の部分は<table>の領域ではないのです。

ということは、マウスカーソルがセルとセルの間を行ったり来たり
するだけで、<table>のonmouseoutが発生してしまうわけで、これ
では見かけの上では<table>から出ていないのに、alertが出てしま
うのです。

で、これが一番厄介な問題で、1週間たっても1つも回答が無かっ
たのはこれが原因だと思います。ただ私もいろいろ考えましたが、
やっぱり「無理」というのが私の答えです。この問題に関しては、
HTMLのイベント処理における欠陥と考えるしかないかもしれません。

さて、最初の問題、ある要素でイベントが発生すると、その親要素
まで連鎖してしまうという問題の解決方法はあります。この連鎖は
onclickなどでも起こります。これはほかの機会に使うかもしれな
いので、解決法の一例を書いておきます。

例1:
<table onmouseout="alert('Event');">
<tr>
<td onmouseout="window.event.cancelBubble=true;">
Sample1
</td>
<td onmouseout="window.event.cancelBubble=true;">
Sample1
</td>
</tr>
</table>
<!-- window.event.cancelBubble=true; で、連鎖を取り消し -->

例2:
<table id=table1
onmouseout="if (window.event.srcElement==table1) alert('Event');">
<tr>
<td>Sample2</td><td>Sample2</td>
</tr>
</table>
<!-- srcElememtは、イベントを起こした要素を表す -->
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
「欠陥」という言葉を聞いて安心しました。
下の方に書いていただいたスクリプト、
今回の質問とは関係有りませんが、コレもかなり困っていました。
(よって、ポイントを発行させて頂きます。)
スゴイ複雑な邪道的やり方で解決したのですが・・・
やっぱり、僕は単語不足みたいです。
使わせていただきます。有り難うございます。

お礼日時:2002/01/11 19:21

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

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

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

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

Aベストアンサー

ブラウザ内でドラッグが始まった場合に限り
ブラウザ外に行っても追っかけることが出来るようです。
下記の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>

ブラウザ内でドラッグが始まった場合に限り
ブラウザ外に行っても追っかけることが出来るようです。
下記のHTMLファイルを作成すると検証できます。
ページ内でクリックするとテキストボックスにX、Yの座標が表示されます
ブラウザを小さくしてページ内でドラッグして
ページ外でドロップするとページ外のXY座標が表示されます。

ページ外でドラッグ始めてページ内に来ても無反応です。
グーグルマップはonclickイベントのみでやっているようです。
<div>内にdivのサイズより大きいマップのimageを置い...続きを読む

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;
}
ですね。

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化したほうが、可読性が高くなると
思います。

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()で伝播を停...続きを読む

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

Qonchangeイベントを強制的に発生させる

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchange = change;
}


</script>

<input id="1" type="text" value="1" onchange="change();">

<a href="javascript:update();">update</a>

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchan...続きを読む

Aベストアンサー

回答は出てますが・・・onchangeにこだわるなら、

document.getElementById('***').onchange();

()を付ければ呼び出せます。(Windows FireFox2、Opera8で確認)


var f = document.getElementById('***').onchange;
f();

IE6の場合はいったん変数に代入する必要があるようです。

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ウィンドウの2重起動を防止したい

こんにちわ!

javaScriptからwindow.open()でサブウィンドウを
開いている状態で、再度リンクをクリックした場合は
なにもしないようにしたいのですが、現在は、しかたなく
開かれているサブウィンドウに再度同じページを表示
するようにしています。

もし、現在サブウィンドウが開かれている場合は
親ウィンドウのリンクをクリックしても無効とする
方法があれば教えて下さい.

Aベストアンサー

window.open() の戻値を使えば可能です。

# スクリプト部
var newwin;
function openWindow(a) {
  if (!newwin || newwin.closed) {
    newwin = window.open(a.href, a.target, "~");
  else
    newwin.focus();
  return false;
}

# タグ部
<a href="xxx.html" target="newwin" onClick="return openWindow(this)">~</a>

最初は newwin に値が入っていないので、!newwin が成り立ち、if 文の中の window.open() が実行されます。

2回目以降は !newwin は常に偽となり、2個目の条件 newwin.closed が評価されます。
.closed は、ウィンドウが開いていれば false となり、閉じられていれば true となります。
つまり、開いていれば else 側が実行され、閉じられていたら再度 open するわけです。

window.open() の戻値を使えば可能です。

# スクリプト部
var newwin;
function openWindow(a) {
  if (!newwin || newwin.closed) {
    newwin = window.open(a.href, a.target, "~");
  else
    newwin.focus();
  return false;
}

# タグ部
<a href="xxx.html" target="newwin" onClick="return openWindow(this)">~</a>

最初は newwin に値が入っていないので、!newwin が成り立ち、if 文の中の window.open() が実行されます。

2回目以降は !newwin は常に偽となり...続きを読む

Qopenerは使えないのでしょうか?

以下の操作をした際に親ウインドウの情報を取得できず困っています。
1.親ウインドウでサブウインドウを開く
2.サブウインドウのボタン押下で親ウインドウのlocationを変更する
3.サブウインドウから「window.opener」を使おうとすると、object自体は存在するがnameやdocumentが取得できない

サブウインドウが開いている間に親ウインドウを変更するとopenerは情報を失うのでしょうか?

やりたいことはサブウインドウから親ウインドウのアドレスを変更し、hiddenに値をセットしたいのですが、対応策はありますでしょうか?

よろしくお願いします。

Aベストアンサー

隠しフレームを用意します。
親ウインドウを開く際、隠しフレームのjavascriptから開くようにします。
子ウインドウも開く際、隠しフレームのjavascriptから開くようにします。
子から親ウインドウを更新する場合は、隠しフレームのjavascriptで更新をかけます。
また、hiddenに値を入れる際にも隠しフレームのjavascriptで、、。
こんな感じでやれば、出来ると思います。

ちなみに隠しフレームって、0ピクセルのフレームの事です。

Q特定のウィンドウ名を持つウィンドウの有無を判別

お世話になります。

現在、以下のスクリプトでPageA.htmlのボタンをクリックすると
新ウィンドウを開きPageB.jspを表示し、PageA.htmlは閉じます。
/* PageA.html */
function submitPageB(){
// "WindowB"が既に存在する場合は閉じる
var dummy = window.open("","WindowB","");
dummy.close();

// 待ち受けページを開く
var win = window.open("NowLoading.html","WindowB","width=800,height=600,scrollbars=no,resizable=no");

// WindowBにpost形式でパラメータ送信
with(window.document.formA){
action="PageB.jsp";
method="post";
target="WindowB";
submit();
}

//PageA.htmlを閉じる
window.close();
}

これを"WindowB"が存在するか判別して
"WindowB"がなければそのまま開く、
"WindowB"があればconfirmで新たに開くか開かないかを
選択させるようにしたいのですが、
"WindowB"というウィンドウ名のウィンドウを
取得する方法がわからないため実現できません。

var blWin = true;//※ここで"WindowB"が存在するかどうかを取得したい

if(!blWin || confirm("既に開いています。新たに開きますか?")){
submitPageB();
}

特定のウィンドウ名のウィンドウの有無を知る方法、
あるいは上記のことを実現させるよい案はないでしょうか?

よろしくお願いします。

お世話になります。

現在、以下のスクリプトでPageA.htmlのボタンをクリックすると
新ウィンドウを開きPageB.jspを表示し、PageA.htmlは閉じます。
/* PageA.html */
function submitPageB(){
// "WindowB"が既に存在する場合は閉じる
var dummy = window.open("","WindowB","");
dummy.close();

// 待ち受けページを開く
var win = window.open("NowLoading.html","WindowB","width=800,height=600,scrollbars=no,resizable=no");

// WindowBにpost形式でパラメータ送信
with(window.document.f...続きを読む

Aベストアンサー

できないと思います。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング