OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • すぐに回答を!
  • 質問No.192001
  • 閲覧数922
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 46% (46/99)

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

ちなみにIEのみの動作で考えてくれれば結構です。
よろしくお願いします。
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.2
レベル7

ベストアンサー率 50% (7/14)

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


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

お礼率 46% (46/99)

有り難うございます。
問題なく動作いたします。
 if(event.x == -1)
なんて書き方知りませんでした。
やはり、単語不足ですね。。
勉強になりました。
投稿日時 - 2002-01-11 19:23:57
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル13

ベストアンサー率 50% (604/1207)

<TD>から出ただけで<table>までイベントが発生してしまうとのこ とですが、これを防ぐ方法が無いわけでは有りません。でも、私が 実際すこしやってみたところ、別の問題が出ました。 <html><body onmouseout="alert('Event');"> <table bgcolor=re ...続きを読む
<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は、イベントを起こした要素を表す -->
お礼コメント
nyonta

お礼率 46% (46/99)

回答ありがとうございます。
「欠陥」という言葉を聞いて安心しました。
下の方に書いていただいたスクリプト、
今回の質問とは関係有りませんが、コレもかなり困っていました。
(よって、ポイントを発行させて頂きます。)
スゴイ複雑な邪道的やり方で解決したのですが・・・
やっぱり、僕は単語不足みたいです。
使わせていただきます。有り難うございます。
投稿日時 - 2002-01-11 19:21:37
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ