- ベストアンサー
マウスをブラウザの外に出したら、イベント・・・
マウスをブラウザの外（または<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は、イベントを起こした要素を表す -->
お礼
回答ありがとうございます。 「欠陥」という言葉を聞いて安心しました。 下の方に書いていただいたスクリプト、 今回の質問とは関係有りませんが、コレもかなり困っていました。 （よって、ポイントを発行させて頂きます。） スゴイ複雑な邪道的やり方で解決したのですが・・・ やっぱり、僕は単語不足みたいです。 使わせていただきます。有り難うございます。
関連するQ&A
- テーブルの外にマウスを出したらイベント・・・(2nd)
すいません。この質問２度目デス。 少し状況が変わり、用は ・tableタグからマウスが出たら、イベント(ページを変える。)を発動。 という事をやりたい訳なんですが、、、いくつか問題が有って、 条件 ・table内にはtr、tdがたくさんあるものとする。 ・（諸事情により、imgで架空的なtableは作りたくない。） ・html＋javascriptのみで作成したい。 ・動作環境はIE5.0以上のみでよい。 ・（知らない人の為に書きますが）セル間の所は（space等をすべて0にしても）ど うやらブラウザがtable上と認識しないみたいです。 ・安易な「できません。」という回答はやめて下さい。 凄い複雑なスクリプトになってもいいので(見にくくてもいいので)、よろしくお願いします。出来れば、早めがいいですが、気長に待ちます。
- 締切済み
- JavaScript
- jqueryでテーブル行のマウスアウト時の動作
jqueryでテーブル行をマウスオーバー、マウスアウトした時に行の背景色が 変更されることを期待して下記のようなサンプルを作成してみました。 マウスアウトした時に背景色が変わるようにサンプルを書いて見ましたが 変わりませんでした。どこが悪いかお分かりになりますでしょうか。 また、下記サンプルでマウスアウトした時に色が変わった行の行番号、及び行のオブジェクトを 取得するにはどう記述すればよろしいでしょうか。 <html> <head> <meta charset="UTF-8" /> <title>属性フィルター</title> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { alert("a"); $("table tr").mousout( function() { alert("c"); $(this).css("background-color", "red"); } ); }); </script> </head> <body> <table border="1"> <tr> <td>aiueo</td> </tr> <tr> <td>kakikukeko</td> </tr> <tr> <td>sasisuseso</td> </tr> <tr> <td>tatituteto</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの背景色を複数変更する
テーブルにて、onMouseOverで背景色を変え、 onMouseOut にて背景色を戻すスクリプトを作っています。 セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。 いろいろと探しているのですが、見つかりません。 以下のようなサンプルで 1 と 4 が一緒に変更できないものでしょうか。 よろしくお願いします。 <html> <head> <title>テーブルの色を変える</title> <script language="JavaScript"> <!-- // b_color(idname,cn); // 背景色を変える // idname: 色変更したいタグid； // cn：色変更法 function b_color(idname,cn) { // alert(idname); // debug alert if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; }else{ // alert("あなたのブラウザには対応しておりません。"); } } if (! document.getElementById) { document.write("あなたのブラウザには対応しておりません。マウスを動かしても色は変えられません。<br>"); // マウス移動でいちいちalertが出ると煩わしいので、最初に表示しておく } //--> </script> </head> <body> <table border="1"> <tr> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ１</td> <td>ここ２</td> </tr> <tr> <td>ここ３</td> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ４</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで指定するtrを削除した時に、IEとfirefoxで動作が異なる
はじめて、投稿いたします。 現在、javascriptで指定した行を削除するような動作を作っているのですが、firefoxとIEで動作が異なってしまうため困っています。 ちなみに、firefoxでは、実現してほしい動作をしてくれるのですが、IEではうまく動作してくれません。 tableのtrが3つ以上ある場合は、指定した行が正常に削除します。 しかし、IEだと、trが２つの時には、1番目のtrを削除しようとすると、一緒に2番目のtrの中身が見えなくなってしまいます。 ちなみに、その中の情報が削除されたのかなと思い、alertで表示させるとどうやら削除はされておらず、表示しなくなってしまうようです。 どうすれば、firefoxとIEで、同じような動作をするようにできるのでしょうか？ よろしくお願いします。 以下に、ソースを貼っておきます。 <html> <head> <script type="text/javascript"> <!-- function delete_tr(html_this) { var TR = html_this.parentNode.parentNode; TR.parentNode.deleteRow(TR.sectionRowIndex); var table = document.getElementById('test_table'); var tr_num; var td_num; for (tr_num = 0; tr_num < table.rows.length; tr_num++) { for (td_num = 0; td_num < table.rows[tr_num].cells.length; td_num++) { alert(table.rows[tr_num].cells[td_num].innerHTML); } } } --> </script> </head> <body> <h1>Hello World !!</h1> <table border="1" id="test_table"> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ bbbb ------</td> <td>------ cccc ------</td> </tr> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ BBBB ------</td> <td>------ CCCC ------</td> </tr> <tr align="center"> <td colspan="3"> <input type="button" value="add"> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの背景をマウスオーバーで変える
お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- ベストアンサー
- HTML
- テーブルセルの列での背景色の変更
3行3列のtableで各セルにマウスカーソルをのせた時に そのセルの列すべての背景色を変えるJavaスクリプトを 作成したのですが、うまく動作しません。 どこか間違っているでしょうか。 （たとえば、2-2のセルにマウスカーソルをのせると 1-2、2-2、3-2のセルの背景色をかえるスクリプトです） ●Java function onColor(col) { document.all[col].bgColor = '#00ffff'; } function outColor(col) { document.all[col].bgColor = '#ffffff'; } ●HTML <TABLE BORDER="1" BGCOLOR="#ffffff" cellpadding="0" cellspacing="0"> <colgroup id="a1" span="1" width="25" align="center"> <colgroup id="a2" span="1" width="25" align="center"> <colgroup id="a3" span="1" width="25" align="center"> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">1-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">1-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">1-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">2-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">2-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">2-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">3-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">3-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">3-3</td> </tr> </TABLE>
- ベストアンサー
- JavaScript
- <TABLE><TD><TR>～内のアンカー
以下のように<TABLE><TD><TR>内にアンカーを置いたとき、IE９までは問題なく動作したのですが、IE１０では動作せず、アンカーが引っかからないかように一番上から表示されます。 何か対応策はないでしょうか？ <html> ～ <body> <table> <tr> <td> <a href="aaa"></a> あいうえお </td> </tr> <tr> <a href="bbb"></a> <td> かきくけこ </td> </tr> </table> </body> </html> ---------------------------------------------- http://thispage.html#aaa http://thispage.html#bbb IE9まででは、各行で頭出しされるが、IE10では、先頭から表示される。
- 締切済み
- HTML
- イベントバブル、マウスオーバーなどに関して
http://okwave.jp/qa/q6681276.html に関連しますが divの中に、p、ulが同列にあり div領域からmouseoutしたらイベントが起きるようにしたいと思っています。 イベントは親要素に伝播するということなので event.cancelBubble = true; window.event.cancelBubble=true; をp,ulのイベントに入れました。 又、各要素のマウス状態の履歴をテーブルに残してみました（下にソース）。 （マウスアウトしたら「x」、オーバーで「o」） その結果、 バブリング防止策を講じたため pまたはulのマウスアウトはdivに伝わっていません(ただしFirefoxではダメ？)。 ところがよく見ると div→p div→ul と移動する際、div内ではありますが divは一旦マウスアウトしてから再びマウスオーバーとなっているようです。 まず、ここまでの理解は間違っていないでしょうか？ そして、境界線をまたぐ際、マウスアウトになるのはどうにもならないのでしょうか？ 基本的な質問で申し訳ありませんが、よろしくお願いします。 --------------------------------------------------------------------------------------------- <script style="text/javascript"> function divOn() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'o'; } function divOff() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'x'; } function pOn() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'o'; } function pOff() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'x'; } function ulOn() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'o'; } function ulOff() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'x'; } function stopBubbling() { event.cancelBubble=true; stopPropagation=true; } </script> <div onMouseover="divOn();" onMouseout="divOff();" style="background:#fee;padding:1em;height:300px;">div <p onMouseover="pOn();" onMouseout="stopBubbling();pOff();" style="background:#efe;height:100px;">p</p> <ul onMouseover="ulOn();" onMouseout="stopBubbling();ulOff();" style=";background:#eef;height:100px;"> <li><a>li</a></li> <li><a>li</a></li> </ul> </div> <table border="1"> <thead> <tr> <th>div</th> <th>p</th> <th>ul</th> </tr> </thead> <tbody> <tr> <td id="atDiv"><br /></td> <td id="atP"><br/></td> <td id="atUl"><br/></td> </tr> </tbody> </table>
- ベストアンサー
- JavaScript
お礼
有り難うございます。 問題なく動作いたします。 if(event.x == -1) なんて書き方知りませんでした。 やはり、単語不足ですね。。 勉強になりました。