締切済み

mouseoutで処理が連続発生するのを防ぐには？

2008/03/26 21:14

arexisの回答

arexis
ベストアンサー率66% (66/99)

2008/03/27 10:02 回答No.1

<html> <head> <script type="text/javascript"> document.onmouseover = function(e){ if(!e){ e = window.event } //メソッドによるイベント付加なら不要 var el = e.srcElement || e.target; var root = el; while(root){ if(root.className == 'downlist'){ return; } root = root.parentNode; } /* ここから下はドロップダウンメニュー外にカーソルがある状態 */ /* 構造によりけりで処理色々必要。 elがイベント発生エレメント。 */ alert(1) } </script> </head> <body> <div id="d1" class="downlist" style="border:1px solid"> <h3>テキスト</h3> <p> <a href="">リンク</a> <a href="">リンク</a> <a href="">リンク</a> <a href="">リンク</a> <a href="">リンク</a> </p> </div> </body> </html> mouseoutを利用して質問者さんの希望通りにさせる方法がちょっと思いつかないので documentのマウスオーバー監視にしてみては？マウスオーバーでカーソル位置がドロップダウンリスト上にあるか？を確認してドロップダウンリストと関係ない場所ならドロップダウンリストを非表示に。非表示にする対象は、表示時に変数に格納させて置いて取ればよいです。あとは、ドロップダウンを表示させる元エレメントとドロップダウンの位置や距離の問題とかマウスオーバーにどのタイミングで何をさせるか？など色々調整は必要です。元ソースが無いですし理屈上と言う事で。

この回答がついた質問に戻る

関連するQ&A

見出しタグのつけ方について
見出しタグのつけ方について見出しタグのつけ方が今一、理解できません。下記のようなページの場合、適切な見出しタグのつけ方で適切なのはどれでしょうか？それとも、この３つの中には適切なのはないでしょうか？（特に、メニュー項目をどういう位置づけにしたらいいかがわかりません）初歩的な質問ですが、よろしくお願い致します。 (1)h1・・・サイトの説明文　h2・・・サイト名　h3・・・Welcame,更新情報,関連リンク (2)h1・・・サイトの説明文　h2・・・Welcame,更新情報,関連リンク (3)h1・・・サイトの説明文　h2・・・HOME,ABOUT,WORKS,ACCESS,CONTACT 　h3・・・Welcame,更新情報,関連リンク --------------HTML------------------- <body> <div id="header"> <div id="logo_box">サイト名</div> <h1>サイトの説明文 </h1> <ul id="header_navi" class="clearfix"> <li> <a href="#">HOME</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">WORKS</a> </li> <li> <a href="#">ACCESS</a> </li> <li> <a href="#">CONTACT</a> </li> </ul> </div> <div id="inner" class="clearfix"> <div id="contents"> <h3>Welcame</h3> <p>TEXT　TEXT</p> </div> <div id="right"> <h3>更新情報</h3> <p>TEXT　TEXT</p> <h3>関連リンク</h3> <p>TEXT　TEXT</p> </div> </div> </body> ----------------------------------------------------
- ベストアンサー
- HTML
タグを切り替えるJavaScriptについて
下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> 　<h2>page1</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab"> 　　　<li><a href="#page1"><span>page1を選択中</span></a></li> 　　　<li><a href="#page2"><span>page2</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> <div id="page2"> 　<h2>page2</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab2"> 　　　<li><a href="#page1"><span>page1</span></a></li> 　　　<li><a href="#page2"><span>page2を選択中</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
margin,paddingなどで困ったことがあります。
現在、HPを作っています。そこで相談なのですが、FirefoxやOpera、IE8、IE8のIE7互換モードなどで表示の違いがありました。その部分のソースはこちらです <div class="menu"> <span><h4>Link</h4></span> <p><a href="javascript:void(0)">リンク1</a></p> <p><a href="javascript:void(0)">リンク2</a></p> </div> そしてCSSのソース（一部）です。 div.menu{ font-size: 10pt; color: #000000; font-weight: bold; margin: 3px; padding: 4px; border: 4px groove #000000; width: 178px; background-color: #eeeeee; } div.menu span{ display: block; text-align: center; } div.menu h4{ color: #000000; font-size: 26px; padding-bottom: 10px; padding-top: 10px; } このCSSのソースのどこを修正すれば、正しい表示になるでしょうか？表示は送付画像のような表示です。
- 締切済み
- HTML
リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと思っています。また対応するdivタグのdisplay属性も書き換えたいです。とりあえず思いついたのは以下の方法なのですが、冗長ですし、リンクの数が増えた場合に足していくのが大変です。もっとシンプルに書く方法がないものでしょうか。ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
リンクレイヤー表示の切り替えについて
　もともとは1つのリンクメニューの表示と非表示を切り替える書籍のサンプルを2つのリンクメニューを同じ場所に切り替え表示させるよう修正を行ってみました。　ですが、リンク(1)を表示させてからリンク(2)をさせるにはリンク(1)を再度クリックし、一度非表示にしないとリンク(2)が表示されません。　リンク(1)の表示から直接リンク(2)の表示に切り替えるようにしたいのですがどなたかご教授願えませんでしょうか。 <html> <head> <SCRIPT Language="JavaScript">  </SCRIPT> </head> <body> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag1"> <TT> <A HREF="http://a.co.jp">サイトA</A><BR> <A HREF="http://b.co.jp">サイトB</A> </TT> </DIV> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag2"> <TT> <A HREF="http://c.co.jp">サイトC</A><BR> <A HREF="http://d.co.jp">サイトD</A> </TT> </DIV> <table> <tr> <td> <A HREF="sample.htm" onClick="pullDownMenu('tag1');return false">リンク(1)</A> <A HREF="sample.htm" onClick="pullDownMenu('tag2');return false">リンク(2)</A> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
ＣＳＳレイアウト　positionについて
下記のタグにてpositionタグを使って指定した場合ＩＥの文字サイズを変更しるとcopyrightと言うboxがずれてしまいます。ずれない方法はありませんでしょうか？お分かりの方のご回答をお待ちしております。なお簡単なタグを記載してくれると幸いです。 body { 　　　margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; 　　　　　　width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
HTML トップページから各ページへのタグの作り方
ホームヘージを作っていますが、ド素人で分かりません。教えてください。 http://webz.jugem.jp/?tid=12 上記のようなホームページを作るのですが、「menu1」のボタンから新しいページを作りたいのですが、どのようなタグを使えばよいのでしょうか? 下記はトップページの一部分です。次のページに移動するにはどこへそのタグを書き込めば良いでしょうか？ <div class="header"><p class="description">{blog_description}</p></div> <div class="navigation"> <a href="./" id="active">Home</a> <a href="./#top">menu1</a> <a href="./#top">menu2</a> <a href="./#link">Link</a> <a href="./?pid=1">Profile</a> <div class="clearer"></div> </div>
- ベストアンサー
- その他([技術者向] コンピューター)
重なった画像にクリックイベントを発生させたい
いつも大変勉強させていただいております。かさなった画像にクリックイベントを発生させたいと苦心しておりますが、うまくいきません。スタイルシートのz-indexプロパティーで重なり位置を指定しました。以下のような記述です。  <DIV style="top:117px;left:360px;position:absolute;z-index:1;"><IMG src="00464.png" width="100" height="100" border="1"></DIV>  <DIV style="top:117px;left:360px;position:absolute;z-index:2;"><a href="#" OnClick="javascript:ZoomWin('00464.png');"><IMG src="big.gif" width="42" height="41" border="0"></a></DIV> 00464.pngとbig.gifという画像が重なっていて、それぞれz-indexで指定しています。 big.gifをクリックすると、ZoomWinという関数を発生させて、新規ウインドウを立ち上げたいのですが、リンクすらはれないのです。 z-indexを指定しただけでは、 <a>タグはつかえないのでしょうか？ほかに代替案があればおしえてください。
- 締切済み
- JavaScript
jquery.cookieを利用しての表示
cookieを使用した表示内容の変更を行おうとしていますたとえば <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> を押したら <div id="ID1"><p>これはID1のエリアです</p></div> が出てきて、cookieが残っている限り上記文章が表示されている以前の質問に載っていたソースを使用し、製作しようと思っていたのですがリンク部分を下記のようにすると <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> ↓ <a href="next.html" onclick="Display('no1')">ID1</a> 当たり前といえば当たり前なのですがリンクをクリックした際に、切り替わったエリアが一瞬表示しページに移動してしまいます私としてはページが移動した後に切り替わってほしいのですがなかなか上手くいきません何か良い方法はないでしょうか・・・下記元ソースになります <script type="text/javascript"> function Display(no){ switch(no){ case 'no1': $("#ID1").show(); $("#ID2").hide(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no2': $("#ID1").hide(); $("#ID2").show(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no3': $("#ID1").hide(); $("#ID2").hide(); $("#ID3").show(); $.cookie('area',no,{expires:1}); break; } } $(function($){ if($.cookie('area')){ Display($.cookie('area')); }else{ Display('no1'); } }); </script> <h5><a href="javascript:void(0);" onclick="Display('no1')">ID1</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no2')">ID2</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no3')">ID3</a></h5> <div id="ID1"><p>これはID1のエリアです</p></div> <div id="ID2"><p>これはID2のエリアです。</p></div> <div id="ID3"><p>これはID3のエリアです。</p></div>
- ベストアンサー
- JavaScript
クリックで表示、非表示するメガメニュー
クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>
- ベストアンサー
- JavaScript

mouseoutで処理が連続発生するのを防ぐには？

arexisの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

mouseoutで処理が連続発生するのを防ぐには？

arexisの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

カテゴリ
一覧

専門家に質問してみよう
専門家登録