マウスをブラウザの外(または<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フルブラウザの表示速度の比較

現在、N901iSでjigブラウザを使っている高校生です。

機種やブラウザの違いにおける、簡単な比較をしたいので暇なときに書き込んでいただければ幸いです。


1.機種名
2.ブラウザ名
3.ブラウザ使用期間
4.下記のサイトを完全に表示できるまでの時間
(1)Yahoo!
(2)Google
(3)Amazon
(4)IT media

※設定は自分がもっとも早く表示できるようにしてください。
※1回ではなく、2.3回試して平均の時間を書き込んでください。

できるだけ多くの結果をお待ちしております。


私の結果

1.N901iS
2.jigブラウザ
3.約1年
4.結果
  (1)15秒
  (2)8秒
  (3)30秒
  (4)30秒

Aベストアンサー

簡単に…
1.AK-3001V(willcom)
2.Opera
3.1年半
4.
(1)32秒
 (2)7秒
 (3)48秒
 (4)54秒
「高速化サービス」を使用しての結果です。(通信プロトコルや画像ファイルの最適化を行い、AIR-EDGE PHONEの体感速度を最大200%まで高速化するサービスです。)
参考までに最短時間は
 (1)24秒
 (2)4秒
 (3)37秒
 (4)49秒
でした。

Q特定内の
の色を変える

お世話になります。
特定<table>内の<td>の色を変える
<table id="abc">
<tr>
<td>あああああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
</table>
<table>にはidを定義します。
その<td>タグにはidを定義していません。
このとき、あああああ、いいい、うううの表示色を
<input type="button" value="色を変える" onClick="ChngColor()">

なんてことで、
マウスをクリックすることにより変更できないものでしょうか。
よろしくお願いいたします。

Aベストアンサー

#1さんへの補足より――

> functio ChngColor(){
> var Obj=document.getElementById('abc');
> Obj=document.getElementsByTagName("td");
> for (var i=0;i<Obj.length;i++){
> Obj.style.color="red";
> }
> }

特に3行目がいけない。こう変えましょう。
(あと、詰めすぎは見づらいので、適当に空白を入れました)

function ChngColor() {
var Obj1 = document.getElementById('abc');
var Obj2 = Obj1.getElementsByTagName("td");
for (var i = 0; i < Obj2.length; i++) {
Obj2[i].style.color = "red";
}
}

QWEBブラウザの比較

Internet Explorer(最新の9で)、google chrome、firefox
この3つのブラウザの、
速度、互換性、機能等、特徴を教えてください。

詳しく比較しているサイトがあれば、それも教えていただきたいです。

Aベストアンサー

IEはW3Cの規格から外れた独自機能てんこ盛りなので5から使ってません。
それにクラッカーなんかの標的になりやすいしね。
今はGoogle chrome、Firefoxを併用しています。

chromeは全体的に軽量。起動が速い。対応していないプラグインやツールバーが意外と多い。
FirefoxはFlashコンテンツが多いページだと重くなりやすい。が、全体的には快適だが起動が遅い。
この二つはW3Cに忠実だとは思いますよ。

Q、もしくは