J'ai deux divs, un grand et un plus petit sur l'autre, chaque div a sa propre méthode OnClick. Le problème que j'ai est quand j'ai cliqué sur le plus petit DIV, la méthode OnClick de Big Div est appelée aussi.
Qui puis-je éviter ça?
6 Réponses :
Votre problème est que l'événement La solution la plus simple consiste à ajouter Si vous utilisez jQuery , vous pouvez appeler Pour plus d'informations, voir ici . Cliquez sur propagera l'arborescence de l'élément. Par conséquent, chaque élément contenant un élément qui a été cliqué incendiera également un Cliquez sur Event.
renvoyer false votre gestionnaire.
e.stoppropagation (); sinon sinon , vous devrez appeler e.stoppropagation () s'il existe, puis définissez event.cancelbubble = true .
Merci pour cela ça marche, mais il y a une typo mineure. Vous avez écrit e.stoppropagation (); mais il devrait être e.stoppropagation ();
@Sizzlepants: merci; fixé.
Si vous décidez d'utiliser une bibliothèque JavaScript telle que www.jquery.com, vous pouvez facilement accomplir ce que vous essayez de faire en utilisant les options de prévention de la propagation.
Vous n'avez pas besoin d'utiliser jQuery ou quoi que ce soit d'autre, il est facilement fait avec JavaScript simple.
Qu'est-ce que vous avez affaire à un événement bouillonnant. Jetez un coup d'œil à cet article: http://www.quirksmode.org/js/events_order.html .
Fondamentalement, pour arrêter l'événement de passer à l'élément parent, vous pouvez utiliser quelque chose comme ceci: P>
document.getElementById('foo').onClick = function(e) {
// Do your stuff
// A cross browser compatible way to stop propagation of the event:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
La première ligne de cette fonction pourrait être raccourcie à e = e || fenêtre.Event;
Cela fonctionne sur chrome mais Firefox a déclaré "window.event est indéfini"
Vous rencontrez un cas commun de propagation des événements. Consultez QuirksMode.org pour obtenir tous les détails sur ce qui se passe exactement. Fondamentalement, ce que vous devez faire dans le gestionnaire de clic de plus petit Div est:
if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation();
Le meilleur moyen de détecter quel élément a été cliqué pour analyser la cible de l'événement (cliquez sur Event). J'ai préparé un petit exemple pour ce cas. Vous pouvez le voir dans le code ci-dessous. Cette méthode JavaScript peut être appelée avant d'exécuter votre script < Pré> xxx J'espère que cela aide.
Ça marche enfin des réponses de mélange: Event.cancelBubble = TRUE; if (Event.Stoppropagation) Event.StopPropagation (); fenêtre.Event ne fonctionne pas sur Firefox, ne sais pas pourquoi
fenêtre.event est une propriété non standard, c'est-à-dire.
Cela a fonctionné pour moi à JQuery: De cette façon, si la cible actuelle n'est pas la même que celle de l'extérieur, il ne fera rien. Vous pouvez implémenter des fonctions normales pour l'élément enfant.
Je suppose que les éléments sont imbriqués.
Pouvez-vous poster une démo? Vous pouvez utiliser JSBIN.COM .