- ベストアンサー
マウスをブラウザの外に出したら、イベント・・・
マウスをブラウザの外（または<table>の外）に出したら、イベントを発動したい。（alert等） <table onmouseout="javascript:alert('出たよ！')"> とかやると、<table>内の<td>や<tr>から外に出ただけで、イベントが発動してしまいます。 <body onmouseout="javascript:alert('出たよ！')"> これでも同じです。 ブラウザ（または<table>）の外に出た時だけに発動させたいのです。 どうすればよいのでしょうか？ ちなみにIEのみの動作で考えてくれれば結構です。 よろしくお願いします。
- nyonta
- お礼率46% (46/99)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （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>
その他の回答 (1)
- UKY
- ベストアンサー率50% (604/1207)
<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> <!-- window.event.cancelBubble=true; で、連鎖を取り消し --> 例２： <table id=table1 onmouseout="if (window.event.srcElement==table1) alert('Event');"> <tr> <td>Sample2</td><td>Sample2</td> </tr> </table> <!-- srcElememtは、イベントを起こした要素を表す -->
お礼
回答ありがとうございます。 「欠陥」という言葉を聞いて安心しました。 下の方に書いていただいたスクリプト、 今回の質問とは関係有りませんが、コレもかなり困っていました。 （よって、ポイントを発行させて頂きます。） スゴイ複雑な邪道的やり方で解決したのですが・・・ やっぱり、僕は単語不足みたいです。 使わせていただきます。有り難うございます。
お礼
有り難うございます。 問題なく動作いたします。 if(event.x == -1) なんて書き方知りませんでした。 やはり、単語不足ですね。。 勉強になりました。