タグ内にあるタグに影響させないイベントハンドラの使い方

2005/05/30 14:11

このQ&Aのポイント

HTML文の部分で最外部に設置したイベントハンドラを、内部にあるタグに対して無効にする方法について紹介します。
具体的にはid="t1"なるul要素以外の内部の各要素上（liやa等）におけるonmouseoutを無効にする方法を解説します。
また、最外部のul要素からマウスがoutした時だけイベントを発生させ、ul内部の各要素からマウスがoutされた時にはイベントを発生させない方法もご紹介します。

hkom007
お礼率79% (54/68)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Chaire
ベストアンサー率60% (79/130)

2005/06/01 01:11 回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/javascript"> /*@cc_on @if (@_jscript) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function() { //-------------------------------------------------- document.getElementById('t1'). 　　/*@cc_on @if (@_jscript) attachEvent('on' + @else@*/ 　　addEventListener(/*@end@*/ 'mouseout', func2, false); function func2(event) { 　　var node = /*@cc_on @if (@_jscript) event.srcElement @else@*/ 　　　　　　event.target /*@end@*/; 　　if (node.id && node.id == 't1') { 　　　　// 　　　　// ここから mouseout メイン処理　　　　// 　　　　alert('OK'); 　　} } //-------------------------------------------------- }, false); </script> <title></title> <ul id="t1"> 　<li>なんたらかんたら　　<ul> 　　　<li>○○<a>△△</a></li> 　　　<li>××<a>▽▽</a></li> 　　</ul> 　</li> 　<li>かんたらなんたら</li> 　<li>・・・・・・・・</li> </ul> 以上でご希望の動作にはなりますが，おそらく意図されている結果にはならないでしょう。 - http://www.interq.or.jp/student/exeal/dss/ref/jscript/cond.html - http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/Events/EventTarget.html - http://www.hawk.34sp.com/stdpls/dhtml/event-handler.html - http://www.axis.t.u-tokyo.ac.jp/%7Eshunak/ecmascript/MouseMotionListner.html

質問者