<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi list,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>I'm very surprised on how browsers behaves with events on nested elements.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Only Opera (9.01) sounds to follow the DOM 2.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I tried Firefox 1.5.0.7 , Camino 1.0.2 , Safari 2.0.4.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Any comments ?</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Bernard</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd</A>"></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"><html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>" xml:lang="en" lang="en"></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"><head></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><meta http-equiv="content-type" content="text/html;charset=UTF-8"/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><title>Test</title></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><script type="text/javascript"></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"><!--</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">var res;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">var stopPropagation;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">var preventDefault;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">function setEvent( s ){</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( s == "oneveq" ) {</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb2").onclick = doSomeThing;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").onclick = onclick;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").onmousedown = onmousedown;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").onmouseup = onmouseup;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if( s == "addevtrue" ) {</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb2").addEventListener ( "click" , doSomeThing , true ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").addEventListener ( "click" , onclick , true ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").addEventListener ( "mousedown" , onmousedown , true ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").addEventListener ( "mouseup" , onmouseup , true ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if( s == "addevfalse" ) {</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb2").addEventListener ( "click" , doSomeThing , false ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").addEventListener ( "click" , onclick , false ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").addEventListener ( "mousedown" , onmousedown , false ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">document.getElementById("cb").addEventListener ( "mouseup" , onmouseup , false ) ;</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">res=document.getElementById("res");</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Lucida Grande; min-height: 15px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">function onclick( e ) {</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">res.innerHTML +=" </FONT><FONT class="Apple-style-span" face="Lucida Grande"> </FONT><FONT class="Apple-style-span" face="Lucida Grande">cb click;";</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && stopPropagation ) e.stopPropagation();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && preventDefault ) e.preventDefault();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">function onmousedown( e ) {</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">res.innerHTML +=" </FONT><FONT class="Apple-style-span" face="Lucida Grande"> </FONT><FONT class="Apple-style-span" face="Lucida Grande">cb down;";</FONT><FONT class="Apple-style-span" face="Lucida Grande"> </FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && stopPropagation ) e.stopPropagation();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && preventDefault ) e.preventDefault();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">function onmouseup( e ) {</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">res.innerHTML +=" </FONT><FONT class="Apple-style-span" face="Lucida Grande"> </FONT><FONT class="Apple-style-span" face="Lucida Grande">cb up;";</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && stopPropagation ) e.stopPropagation();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && preventDefault ) e.preventDefault();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Lucida Grande; min-height: 15px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">function doSomeThing( e ){</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">res.innerHTML+=" </FONT><FONT class="Apple-style-span" face="Lucida Grande"> </FONT><FONT class="Apple-style-span" face="Lucida Grande">cb2 click;";</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && stopPropagation ) e.stopPropagation();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">if ( e && preventDefault ) e.preventDefault();</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">}</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande">--></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"></script></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"></head></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"><body></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"><form></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">choose model : <br/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><input type="radio" name="radio" onclick="setEvent('oneveq')"/>elem.onev=f<br/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><input type="radio" name="radio" onclick="setEvent('addevtrue')"/>elem.addEventListener ( eventype , f , true)<br/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><input type="radio" name="radio" onclick="setEvent('addevfalse')"/>elem.addEventListener ( eventype , f , false)<br/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">stopPropagation = <span>false</span><input type="checkbox" onclick="stopPropagation=this.checked ? true : false ; this.previousSibling.innerHTML = stopPropagation;"/><br/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">preventDefault = <span>false</span><input type="checkbox" onclick="preventDefault=this.checked ? true : false ; this.previousSibling.innerHTML = preventDefault;"/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><div id="cb" style="width: 150px ; height : 50px ; background-color : #ccc ; "></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><input id="cb2" type="checkbox"/><span></span></FONT><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande">test on this box</FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"></div></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><FONT class="Apple-style-span" face="Lucida Grande"><div id="res">event history=</div><input type="reset" onclick="res.innerHTML='event history='; "/></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"></form></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"></body></FONT></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><FONT class="Apple-style-span" face="Lucida Grande"></html></FONT></DIV></BODY></HTML>