ベストアンサー

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

2001/12/28 22:54

マウスをブラウザの外（または<table>の外）に出したら、イベントを発動したい。（alert等） <table onmouseout="javascript:alert('出たよ！')"> とかやると、<table>内の<td>や<tr>から外に出ただけで、イベントが発動してしまいます。 <body onmouseout="javascript:alert('出たよ！')"> これでも同じです。ブラウザ（または<table>）の外に出た時だけに発動させたいのです。どうすればよいのでしょうか？ちなみにIEのみの動作で考えてくれれば結構です。よろしくお願いします。

nyonta
お礼率46% (46/99)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

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

2002/01/08 10:11 回答No.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>

質問者

お礼 2002/01/11 19:23

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

その他の回答 (1)

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

2002/01/07 17:03 回答No.1

<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が出てしまうのです。で、これが一番厄介な問題で、１週間たっても１つも回答が無かったのはこれが原因だと思います。ただ私もいろいろ考えましたが、やっぱり「無理」というのが私の答えです。この問題に関しては、 HTMLのイベント処理における欠陥と考えるしかないかもしれません。さて、最初の問題、ある要素でイベントが発生すると、その親要素まで連鎖してしまうという問題の解決方法はあります。この連鎖は onclickなどでも起こります。これはほかの機会に使うかもしれないので、解決法の一例を書いておきます。例１： <table onmouseout="alert('Event');"> <tr> <td onmouseout="window.event.cancelBubble=true;"> Sample1 </td> <td onmouseout="window.event.cancelBubble=true;"> Sample1 </td> </tr> </table>  例２： <table id=table1 onmouseout="if (window.event.srcElement==table1) alert('Event');"> <tr> <td>Sample2</td><td>Sample2</td> </tr> </table>

質問者

お礼 2002/01/11 19:21

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