- ベストアンサー
イベントリスナー
単純なスクリプトで実験しているのですが、原因がわかりません。<id="outer">にイベントリスナーをセットしています。 【例1】 <div id="outer"> 外側のボックス <div id="inner">内側のボックス</div> </div> 【例2】 <div id="outer"> <a href='#'>外側のボックス</a> <div id="inner">内側のボックス</div> </div> ※【例1】で「外側のボックス」の文字をクリックすると、イベントを捉えて"outer"が返ってきます(正常)。 【例2】で「外側のボックス」をクリックすると何も返ってきません。両者の違いは<a>で囲ってあるか、ないかだけです。 <a>で囲うとイベントの伝播(バブリング)が止まるのでしょうか？
- ken2gold
- お礼率75% (3/4)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
以下のコードで試してみましたが、ちゃんと動作するようです(IE6、Firefox2)。この条件だけではちょっと分かりませんね・・・。スクリプトも載せていただいたほうがよいかと。 <html> <head> </head> <body> <div id="outer"> <a href='#'>外側のボックス</a> <div id="inner">内側のボックス</div> </div> <script> document.getElementById("outer").onclick = function(){ alert("!"); }; </script> </body> </html>
その他の回答 (1)
idをどうやって参照しているんでしょうか？ function test(e){ e = e || event; t = e.target || e.srcElement; alert(t.id) } だとすると外側のボックスをクリックすると<a href='#'>外側のボックス</a>のidを返しますね。 alert(t.nodeName)としてテストすると解り易いと思います。 イベントの伝播はこれを見るとなんとなく掴めると思います。 http://oshiete1.goo.ne.jp/qa1214607.html
お礼
> イベントの伝播はこれを見るとなんとなく掴めると思います。 上記リンクを読みましたが、内容が理解できませんでした。 しかし、 > alert(t.nodeName)としてテストすると解り易いと思います。 を条件を変えて繰り返したところ、自分で書いたスクリプトの問題が判明しました。無事解決しました。ありがとうございました。
関連するQ&A
- Event.observeで、入れ子divタグでのmouseoutイベントについて
box1の中にbox2、box2の中にbox3と入れ子になったDIVタグがあります。 box1の外側へカーソルが外れた際にイベント発生させたくて以下のような コードを用意しましたが、box1の内側へカーソルを移動し、box2へカーソルが重なった時にもイベントが発生してしまいます。 box1の外側に外れたときだけイベントが発生するようにしたいのですが、どのように記述したらよいのでしょうか？ また、入れ子になったbox2、3でイベントが発生しないよう、イベントを発生させたいオブジェクトとイベントが発生したオブジェクトを比較していますが、もっとスマートな方法はあるのでしょうか？ ご助力お願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>mouseout</title> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> <!-- window.onload = function () { Event.observe( $("box1"), "mouseout",out,true ); } function out(event) { var p = Event.findElement(event,'div.parent'); var e = Event.element(event); if(p!=e) return; $("tt").innerHTML = e.id+"からmouseout<br />"+$("tt").innerHTML; Event.stop(e) } // --></script> <style> #box1{ background: #ccc; padding: 10px; } #box2{ background: #ddd; padding: 10px; } #box3{ background: #eee; padding: 10px; } </style> </head> <body> <h1>mouseout</h1> <div id="box1" class="parent">ボックス1 <div id="box2">ボックス2 <div id="box3">ボックス3</div> </div> </div> </div> </body> <div id="tt"></div> </html>
- 締切済み
- JavaScript
- css で背景のリピート設定についておしえてください。
css で背景のリピート設定についておしえてください。 htmlもcssも初心者で初めてホームページの制作をしています。 タグをコピーします。 <body> <div id="header"> </div> <div id="globalnavi"> <ul> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> </ul> </div> </div> <div id="haikei_repeat"> <div id="content1"> <div class="inner_top"></div> <div class="inner_repeat"> ここにテキスト </div> <div class="inner_bottom"></div> </div> <div id="body_right"> <div class="inner_top2"></div> <div class="inner_repeat2">ここにもテキスト</div> <div class="inner_bottom2"></div> </div> </div> </body> bodyにも背景画像を使い、ヘッダ以下の コンテント部分の<div id=haikei_repeat> にy方向にリピート画像を指定しました。 <div id="haikei_repeat"> の中にある、 div classにもそれぞれ背景画像をしていし、topとbottomはリピートさせず、 真ん中のinner_repeatのみ背景画像をリピートしています。 このdivにテキストやimgを挿入し、後ろのhaikei_repeatもinnerrepeatの大きさに合わせて縦に リピートしてほしいのですが、うまくできません。 <div id="haikei_repeat">と <div id="inner_repeat">のボックスサイズは 横は指定し、縦のみauto にしています。 inner_repeatはきちんと内容の量にあわせてレピート表示できていますが、 背景リピートはできていません。 どのようにしたらいいでしょうか？？？ どなたかおねがいします。
- ベストアンサー
- HTML
- 1番上の3つのフレームだけセンターに配置したいです
すみません。現在下記のようなコードでフレームを配置しています。1番上の3つのフレームだけセンターに配置したいと思っているのですが、下記のコードでもっとも効果的な方法はどのように入力すればよろしいのでしょうか？簡単な事なのかも知れませんが素人なのでよくわかりません。すみませんがよろしくお願いいたします。 <style type="text/css"><!-- .outer-frame { width:1000px; overflow: hidden; } .inner-frame { width: 150px; height: 150px; overflow: hidden; border: 1px solid; color: #a9a9a9; padding: 3px; float: left; margin: 5px;} div.inner-frame:hover {border-color: #ff0000;} --></style> <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> ↑ この3つだけ中央に表示したいです。 <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> </div>
- ベストアンサー
- CSS
- イベントリスナーがうまくいかない
delBtnがない場合にイベントリスナーを読み込むとエラーが出てその後の処理が行われないため 下記のようにあった場合のみ予約するようにしたところ今度はクリックしても実行されない問題が起きました。 読み込み時は、エラーにならないようにし、かつボタンを押したときに要素を削除するようにするにはどうしたらよいでしょうか？ var Result = document.getElementsByClassName('Result')[0].innerHTML = '<span class="u-mr-1rem">あああああ</span><input id="DelBtn" type="button" value="削除">; var Result = document.createElement('p'); BtnWrap.appendChild(Result); Result.classList.add('Result u-mtb-1rem'); var delBtn = document.getElementById('DelBtn'); if(delBtn !== null) { delBtn.addEventListener('click', function() { document.getElementsByClassName('Result')[0].remove(); }); }
- 締切済み
- JavaScript
- cssで作ったHP。左のメニューを選んだら右に表示したい。
ホームページ作りの初心者です。左にあるメニューを選択したら、右のウィンドウ枠に表示されるようにしたいのですが、志向錯誤しても思うようになりません。 フレーム、という構造にしていれば、targetを使ってできるというのは分かったんですが、cssで作っています。これは別ものですよね？ それも良く分からなくなっています。 私の下手な説明よりも見ていただく方がいいかと思いますので、例を載せさせてもらいます。やりたいことは、テスト１を押したら、test1.htmがcontents2に表示されるようにしたいのです。 ――――― <div id="wrapper"> <div id="header"></div> <div id="inner"> <div id="contents1"> <a href="./test1.htm"> ●テスト</a><br><br> <a href="./test2.htm"> ●テスト２</a><br><br> <a href="./test3.htm"> ●テスト３</a><br> </div> <div id="contents2"> /*ここに表示したい*/ </div> </div> <div id="footer"></div> </div> </div> ―――――――――――― よろしくお願いいたしますm(__)m
- ベストアンサー
- その他（インターネット・Webサービス）
- jquery:animate中にイベントを付与
#box{width:100%;height:100%;position:relative;} #idou{width:3000px;height:100%;position:absolute;} #ugoku{position:absolute;top:-300px;right:-1500px;} a{display:block;width:100px;height:100px;right:0;top:100px;} <div id="box"><div id="idou"><img id="ugoku" src="*.gif" width="300" height="300"><a href="">左に移動</a></div></div> ・jQuery(1.7.1） ・mousewheel.jsを使用、var scrollInt=100;$('html').mousewheel(function(event,mov){$("html,body").css("left","-="+(scrollInt*mov)+"px");});で通常は横移動するソース。 ・$("a").click(function(){$("#idou").animate({left:0},"slow");});でリンクをクリックすると左に戻す。この時の#ugokuが問題。 ・移動の角度は50度で設定、#idouのleftが-1000～-1500pxの間というような特定の間に#ugokuの画像を画面の右上から左下にanimateで流したい。 最後の項目をやろうとして完全に行き詰ってしまって困っています。 どちらかというと数学の問題かもしれません。 animate動作中に、#idouのleftが～pxになったときを拾うようなイベントは存在するのでしょうか？その他良いやり方やURLあれば教えて頂けると幸いです。 よろしくご教授ください。
- ベストアンサー
- JavaScript
- XHTML+CSSによるデザインをしています。
XHTML+CSSによるデザインをしています。 divボックスによる３段組レイアウトをして、左サイドバーの中にdivボックスを、縦に複数設置しようとしたら、２個目のボックスが表示されずメインボックスと右サイドバーが詰まってレイアウトが崩れてしまいました。 コーディングミスをご指摘いただけるのでしたらお願いします。 <div id="wrap"> <div id="header"> <div id="header_top"> <div id="logo"> <img src="image/logo.jpg" alt="" /> </div><!-- /logo --> <div id="header_right"> <div id="logo2"> Lost Book World </div> <div id="header_right_txt"> Yu </div> </div><!-- /header_right --> </div><!-- /header_top --> <div id="header_bottom"> <a href=".html"><img src="image/navi_global01.jpg" alt="" /></a><a href=".html"><img src="image/navi_global02.jpg" alt="" /></a><a href=".html"><img src="image/navi_global03.jpg" alt="" /></a><a href=".html"><img src="image/navi_globa4.jpg" alt=" /></a><a href=".html"><img src="image/navi_global05.jpg" alt="" /></a> </div><!-- /header_bottom --> </div><!-- /header --> <div id="inner"> <div id="largeWrap"> <div id="mainWrap"> </div><!-- /mainWrap --> <div class="sideAlphaWrap"> <div id="form_nv"> <img src="image/form-n.jpg" alt="" /><a href=""><img src="image/form-gen.jpg" alt="" /></a> </div> <div id="form"> </form> </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> <br /> <div id="form_nv"> <div id="form"> ああああ </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> </div><!-- /sideAlphaWrap --> <div class="clear"><hr /></div> </div><!-- /largeWrap --> <div class="sideBetaWrap"> 右サイドバー </div><!-- /sideBetaWrap --> <div class="clear"><hr /></div> </div><!-- /inner --> <div class="footer"> <p>ヘッダー<br /> Copyright © 2004-2010 abc co.,Ltd., All rights reserved.</p> </div><!-- /footer --> </div><!-- /wrap -->
- ベストアンサー
- HTML
- 現在作成しているページで、一部をPHPで記述するようにしているのですが
現在作成しているページで、一部をPHPで記述するようにしているのですが、 一度記述したPHPの部分のみをボタンをクリックしたら削除して 新たなPHPを呼び出したいと考えています。 HTMLソースを表示します。 <div class="box009"> <div class="box009inner"> <div class="box009m"> <?php require_once("./work/twitter.php"); twitter_serch(jsports,20); ?> <p class="mt10"><a href="#"><img src="img/button005.gif" width="629" height="40" alt="もっと読む" /></a></p> </div><!-- /box009m --> </div><!-- /box009inner --> </div><!-- /box009 --> このPHPの部分で記述している部分のみを削除したいのですが、 その場合はどのように記述すればよいでしょうか？ よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- スムーズスクロールとfleXcrollの併用
よろしくお願い致します。 jQueryを使用して、「overflow: auto」を指定している要素内でスムーズスクロール出来る方法を探しており、以下のようなコードを見つけました。 $(document).ready(function(){ var box = $('#contents'); $(document).click(function(event){ var obj = $(event.target); var anchor = obj.filter('a[href*="#"]'); if (!anchor[0]) anchor = obj.parents('a[href*="#"]'); if (anchor[0]){ var target = $(anchor[0].hash, box); if (target[0]){ var scrollTop = box.scrollTop(); var dist1 = box.prop('scrollHeight') - box.prop('clientHeight') - scrollTop; var dist2 = target.position().top - box.position().top; box.animate({ scrollTop: scrollTop + Math.min(dist1, dist2)}); return false; } } return true; }); }); ↑このコードで「overflow:auto;」を指定している要素内でスムーズスクロールが出来るようになったのですが、スクロールバーを装飾できる「fleXcroll（http://shanabrian.com/web/library/flexcroll.php）」プラグインと併用すると、スムーズスクロールが効かなくなってしまいます。 「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる（記述が長くここには書ききれませんでした）のですが、薄識のため何処に問題があるのか分からない状態です。 ちなみにHTMLは、下記のようなコードで使用しています。 <div id="navi"> <ul> <li><a href="#A">divAへ移動</a></li> <li><a href="#B">divBへ移動</a></li> <li><a href="#C">divCへ移動</a></li> <li><a href="#D">divDへ移動</a></li> <li><a href="#E">divEへ移動</a></li> </ul> </div> <div id="hoge" style="height:500px; overflow:auto;"> <div id="A">divAの内容</div> <div id="B">divBの内容</div> <div id="C">divCの内容</div> <div id="D">divDの内容</div> <div id="E">divEの内容</div> </div> 分かりにくい説明で恐れ入ります。 補足説明致しますので、お分かりになる方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。
- ベストアンサー
- JavaScript
- イベントリスナーに設定した関数内で、id属性の値を取得するには
IEでイベントリスナーに設定した関数で、イベントを発生させた要素のid属性値を取得する方法が分からずに困っています。 記述したコードは下記のようになります。Firefoxではうまく動作しました。 clickHandler内でFirefoxのe.currentTarget.idに対応するような処理はどのように行えばよいでしょうか。 ------------ JavaScript部分 ----------------------- function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } function clickHandler(e) { var id; if (document.all && !window.opera) { // IEの場合に、ここの処理でid属性の属性地 hoge1やhoge2を取得したい。 // id = window.event.srcElement.id; これではだめ } else { id = e.currentTarget.id; } // idに応じた処理 } var elm1 = document.getElementById('hoge1'); var elm1 = document.getElementById('hoge2'); addEvent(elm1,'click',clickHandler,false); addEvent(elm2,'click',clickHandler,false); ------------ HTML部分 ----------------------- <li><a id="hoge1" href="#"><img src="●●" /></a></li> <li><a id="hoge2" href="#"><img src="●●" /></a></li> 先に進むことができずに困っています。よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
わざわざサンプルスクリプトまで提示していただき感謝の極みです。スクリプトが絶対正しいという前提で質問したのですが、そのスクリプトが間違っていました。すみません。