- ベストアンサー
イベントリスナー
単純なスクリプトで実験しているのですが、原因がわかりません。<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)としてテストすると解り易いと思います。 を条件を変えて繰り返したところ、自分で書いたスクリプトの問題が判明しました。無事解決しました。ありがとうございました。
お礼
わざわざサンプルスクリプトまで提示していただき感謝の極みです。スクリプトが絶対正しいという前提で質問したのですが、そのスクリプトが間違っていました。すみません。