Christian: onclick nur einmal BITTE!

ich habe das Problem das wenn man z.b. nur den unterpunkt l1.2.1 anklickt das ich dann aber auch alle click-Events bis nach ganz oben bekomme also l1.2 und l1 wie kann ich dies verhindern?

  
  
 <style>  
  li {  
   border: 1px solid #aaaaff;  
  }  
 </style>  
 <ul>  
  <li onclick="alert('l1');">l1  
   <ul>  
    <li onclick="alert('l1.1');">l1.1</li>  
   <ul>  
   <ul>  
    <li onclick="alert('l1.2');">l1.2  
    <ul>  
     <li onclick="alert('l1.2.1');">l1.2.1</li>  
    <ul>  
    </li>  
   <ul>  
  </li>  
 </ul>  
  

  1. Hi,

    ganz logisch: Du sagst ihm jeweils:
    "Wenn jemand auf dieses Element klickt, dann tu das..."
    und zweitens
    "Dieses Element schließt die anderen Elemente mit ein!"

    Das erste <li> schließt also alle untergeordneten <ul> und <li> ein. Wenn du diesem übergeordneten <li> nun ein onclick zuweist, gilt das für alle elemente bis zum Ende des übergeordneten <li>.

    Wenn die verschachtelte Listenstruktur tatsächlich die einzige Möglichkeit für dich ist, kannst du um den jeweiligen Text, der Klickbar sein soll ein <span onclick="alert('bla')> ... </span> und nimmst den onClick aus dem <li>-Tag raus.

    Ich hoffe ich habe das jetzt nicht zu kompliziert ausgedrückt

    Liebe Grüße,
    Lukas

    --
    Selfcode: ie:% fl:| br:^ va:) ls:& fo:| rl:? n4:& ss:) de:] js:| ch:? sh:) mo:} zu:)
  2. selber gefunden!

    http://forum.de.selfhtml.org/archiv/2005/6/t108819/

      
    window.event.cancelBubble = true;  
    
    
    1. Hallo,

      http://forum.de.selfhtml.org/archiv/2005/6/t108819/

      window.event.cancelBubble = true;

      Wie du dem Thread entnehmen kannst, ist das nicht alles, denn das funktioniert nur im IE (und vielleicht fehlertoleranten anderen Browsern).
      Eine browserübergreifende Funktion zum Abbrechen des Event-Bubblings findest du ebenfalls im besagten Thread.

      Mathias

      1. das geile ist ja das wenn man eine function [xyz()] aufruft ob ie oder ff
        es nicht mehr geht.

        l1.2.1 funktioniert so wie ich das will
        bei l1.2.2 wird das event das ich eigentlich haben will geblockt aber alle anderen in der kette kommen (l1.2 und l1)

        bei l1.2.3 bis l1.2.4 kommt logischerweise (kein EventStop) die ganze kette.

        woran kann das jetzt wieder liegen was EventStop nicht funktioniert?

          
        <html>  
         <head>  
          <script language="JavaScript">  
           function EventStop(e) {  
             if(window.event)  
               window.event.cancelBubble=true;  
             else {  
               e.stopPropagation();  
             }  
           }  
          
           function xyz(txt){  
            alert(txt);  
           }  
          </script>  
          <style>  
           li {  
            border: 1px solid #aaaaff;  
           }  
          </style>  
         </head>  
         <body >  
          <ul>  
           <li onclick="alert('l1');">l1  
            <ul>  
             <li onclick="alert('l1.1');">l1.1</li>  
            </ul>  
            <ul>  
             <li onclick="alert('l1.2');">l1.2  
              <ul>  
               <li onclick="alert('l1.2.1'); EventStop(event);">l1.2.1</li>  
              </ul>  
              <ul>  
               <li onclick="xyz("l1.2.2"); EventStop(event);">l1.2.2</li>  
              </ul>  
              <ul>  
               <li onclick="alert('l1.2.3');">l1.2.3</li>  
              </ul>  
              <ul>  
               <li onclick="xyz('l1.2.4');">l1.2.4</li>  
              </ul>  
             </li>  
            </ul>  
           </li>  
          </ul>  
         </body>  
        </html>