jQuery - verschachtelte Listen und click im ie7

D

Dustin84

Erfahrenes Mitglied
Hallo,

ich habe folgende HTML Struktur:
HTML: 
<ul>
  <li class="delCookies opennav">Hauptlink 1</li>
    <ul>
      <li class="opennav">Sublink 1</li>
    </ul>
   <li class="delCookies opennav">Hauptlink 2</li>
   <li class="delCookies opennav">Hauptlink 3</li>
</ul>

delCookies und opennav sind jquery Funktionen, die per click ausgelöst werden.

Das Problem:
Klicke ich im IE7 auf Sublink1, so wird opennav ausgeführt. Das ist soweit korrekt. ABER zusätzlich wird auch nochmal delCookies und opennav von Hauptlink 1 ausgeführt.
Warum ist das so?

Gruß
D.
 
Hi,

du musst das Weiterreichen des Events im Dokumentenbaum verhindern. Das Event-Objekt in jQuery bietet hierfür die Methode stopPropagation.

Ausserdem ist deine HTML-Syntax nicht korrekt. Eine geschachtelte Liste muss innerhalb eines LI-Elements notiert werden.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('.delCookies').click(function(evt){
    alert('delCookies');
  });
  $('.delCookies .opennav').click(function(evt){
    // Weiterreichen des Events unterbinden
    evt.stopPropagation();
    alert('opennav');
  });
});
 //-->
</script>
</head>
<body>
<ul>
  <li class="delCookies opennav">Hauptlink 1
    <ul>
      <li class="opennav">Sublink 1</li>
    </ul>
  </li>
  <li class="delCookies opennav">Hauptlink 2</li>
  <li class="delCookies opennav">Hauptlink 3</li>
</ul>
</body>
</html>
Ciao
Quaese
 
danke, das scheint erstmal zu funktionieren...auch wenn ich es nicht ganz verstehe.

Diese Funktion wir ja nur ausgeführt, wenn ich auf Sublink 1 oder noch tiefere Ebenen klicke.
Aber wo steht das jetzt, dass delCookies nicht ausgefürt werden soll?
PHP: 
  $('.delCookies .opennav').click(function(evt){
    // Weiterreichen des Events unterbinden
    evt.stopPropagation();
    alert('opennav');
  });
 
Hi,

hier:
Code: 
evt.stopPropagation();
Wie bereits geschrieben, wird so das Weiterreichen (bubbling) eines Events im Dokumentenbaum unterbunden.

Kurz zum Bubbling
Voraussgesetzt sei folgendes HTML-Kontrukt:
Code: 
<div onclick="alert('div');">DIV-Inhalt<span onclick="alert('span');">SPAN-Inhalt</span></div>
Beim Bubbling wird das ausgelöste Ereignis (z.B. onclick) vom Quellelement bis zum Wurzelelement den Dokumentenbaum aufwärts weitergereicht. So ist gewährleistet, dass auch die Handler aller übergeordneten Element abgearbeitet werden.

Im obigen Beispiel bedeutet das, das ein Klick auf das SPAN auch an das DIV weitergeleitet wird und dort das alert auslöst. Ist sinnvoll, da es sich neben dem Klick auf das SPAN ja auch um einen Klick auf das DIV handelt.

Ist dieses Verhalten nicht erwünscht, muss das Weiterreichen eben gezielt unterbunden werden.


Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück