Comment arrêter le Bubble d'événement sur la case à cocher cliquez
j'ai une case à cocher que je veux effectuer une action Ajax sur l'événement de clic, cependant la case à cocher est également à l'intérieur d'un conteneur avec son propre comportement de clic que je ne veux pas exécuter lorsque la case à cocher est cliqué. Cet échantillon illustre ce que je veux faire:
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#container').addClass('hidden');
$('#header').click(function() {
if($('#container').hasClass('hidden')) {
$('#container').removeClass('hidden');
} else {
$('#container').addClass('hidden');
}
});
$('#header input[type=checkbox]').click(function(event) {
// Do something
});
});
</script>
<style type="text/css">
#container.hidden #body {
display:none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Title</h1>
<input type="checkbox" name="test" />
</div>
<div id="body">
<p>Some content</p>
</div>
</div>
</body>
</html>
cependant, je ne peux pas comprendre comment arrêter l'événement bouillonnant sans provoquer le comportement de clic par défaut (case à cocher étant cochée/non cochée) pour ne pas courir.
tous les deux l'arrêt suivant de l'événement bouillonnant, mais aussi ne pas changer l'état de case à cocher:
event.preventDefault();
return false;
8 réponses
remplacer
event.preventDefault();
return false;
avec
event.stopPropagation();
événement.arrêt de la production()
arrête le bouillonnement d'un événement à éléments de parent, empêchant tout parent les gestionnaires de notification de la événement.
événement.préventdefault()
empêche le navigateur d'exécuter l'action par défaut. L'utilisation de la méthode estdéfaultprévu de savoir si cette méthode a jamais été appelé (sur ce objet de l'événement).
N'oubliez pas IE:
if (event.stopPropagation) { // standard
event.stopPropagation();
} else { // IE6-8
event.cancelBubble = true;
}
Comme d'autres l'ont mentionné, essayez stopPropagation()
.
et il y a un second handler à essayer: event.cancelBubble = true;
c'est un handler spécifique à L'IE, mais il est supporté en au moins FF. Je ne sais pas grand-chose à ce sujet, car je ne l'ai pas utilisé moi-même, mais ça pourrait valoir le coup, si tout le reste échoue.
lorsque vous utilisez jQuery, vous n'avez pas besoin d'appeler une fonction stop séparée..
Vous pouvez tout simplement return false
dans le gestionnaire d'événement
cela arrêtera l'événement et annulera les bulles..
Voir aussi:
de l'événement.preventDefault () vs. return false
De jQuery docs:
ces manipulateurs peuvent donc empêcher le gestionnaire délégué du déclenchement par appel d'événement.stopPropagation () ou returning false.
c'est un excellent exemple pour comprendre le concept de bouillonnement d'événement. Basé sur les réponses ci-dessus, le code final ressemblera comme mentionné ci-dessous. Lorsque L'utilisateur clique sur la case à cocher, la propagation de l'événement à son élément parent "en-tête" sera arrêtée en utilisant event.stopPropagation();
.
$(document).ready(function() {
$('#container').addClass('hidden');
$('#header').click(function() {
if($('#container').hasClass('hidden')) {
$('#container').removeClass('hidden');
} else {
$('#container').addClass('hidden');
}
});
$('#header input[type=checkbox]').click(function(event) {
if (event.stopPropagation) { // standard
event.stopPropagation();
} else { // IE6-8
event.cancelBubble = true;
}
});
});
crédit à @mehras pour le code. Je viens de créer un extrait pour le démontrer parce que je pensais que cela serait apprécié et je voulais une excuse pour essayer cette fonctionnalité.
$(document).ready(function() {
$('#container').addClass('hidden');
$('#header').click(function() {
if($('#container').hasClass('hidden')) {
$('#container').removeClass('hidden');
} else {
$('#container').addClass('hidden');
}
});
$('#header input[type=checkbox]').click(function(event) {
if (event.stopPropagation) { // standard
event.stopPropagation();
} else { // IE6-8
event.cancelBubble = true;
}
});
});
div {
text-align: center;
padding: 2em;
font-size:1.2em
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox"/>Checkbox won't bubble the event,
but this text will.</div>
<div id="container">click() bubbled up!</div>
à angularjs cela devrait fonctionner:
event.preventDefault();
event.stopPropagation();