マウスをブラウザの外(または<table>の外)に出したら、イベントを発動したい。(alert等)
<table onmouseout="javascript:alert('出たよ!')">
とかやると、<table>内の<td>や<tr>から外に出ただけで、イベントが発動してしまいます。
<body onmouseout="javascript:alert('出たよ!')">
これでも同じです。
ブラウザ(または<table>)の外に出た時だけに発動させたいのです。
どうすればよいのでしょうか?
ちなみにIEのみの動作で考えてくれれば結構です。
よろしくお願いします。
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>
有り難うございます。
問題なく動作いたします。
if(event.x == -1)
なんて書き方知りませんでした。
やはり、単語不足ですね。。
勉強になりました。
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が出てしま
うのです。
で、これが一番厄介な問題で、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は、イベントを起こした要素を表す -->
回答ありがとうございます。
「欠陥」という言葉を聞いて安心しました。
下の方に書いていただいたスクリプト、
今回の質問とは関係有りませんが、コレもかなり困っていました。
(よって、ポイントを発行させて頂きます。)
スゴイ複雑な邪道的やり方で解決したのですが・・・
やっぱり、僕は単語不足みたいです。
使わせていただきます。有り難うございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
ダブルクォーテーションのreplaceの方法
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
至急!GetElementById でtdの...
-
JavaScriptで特定のtdタグにcla...
-
特定<table>内の<td>の色を変える
-
一覧から選択した行の行番号を...
-
jQueryで行の移動
-
別ページからOnclickでテーブル...
-
テーブル行のクリックでチェッ...
-
「オブジェクトは、このプロパ...
-
テーブルの背景画像をランダム...
-
tableの任意行にfocusをあてる
-
チェックボックスにチェックが...
-
特定タグの文字を抽出するには
-
Selenium.ChromeDriverの使い方...
-
td:nth-childを使ってa要素を取...
-
Jquery on click 発火しない
-
【JQuery】テーブルで行選択さ...
-
JavaScriptによる表のソート機...
-
javascriptでASPにデータを渡す
-
return trueとreturn falseの用...
-
フォームで入力した値を別のフ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
tableの任意行にfocusをあてる
-
ハイパーリンクを別ウインドウ...
-
一覧から選択した行の行番号を...
-
チェックボックスにチェックが...
-
プルダウンで選択すると、DBの...
-
至急!GetElementById でtdの...
-
【UWSC】HTML内のある部分を抽...
-
セルをドラッグで選択するときに、
-
マウスをブラウザの外に出した...
-
「オブジェクトは、このプロパ...
-
JavaScriptでテーブルの行入れ替え
-
テーブルの変数について
-
HTML中のTABLEのデータを抽出す...
-
jquery datatablesを使用 イン...
-
javascript クリックすると、あ...
-
スクロールバーの表示位置を変...
-
別ページからOnclickでテーブル...
-
クリックされた罫表セルの行番...
おすすめ情報