Empêcher javascript onclick sur l'élément enfant

StackOverflow https://stackoverflow.com/questions/1431812

  •  07-07-2019
  •  | 
  •  

Question

Ok, question simple: 

<div onclick="javascript:manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>

Sans répliquer le paramètre manualToggle sur les 2 plages autorisées à cliquer, comment puis-je empêcher la sélection du bouton " Pas autorisé à cliquer " la durée de déclenchement de son événement onClick parent div quand il est cliqué sur?

Était-ce utile?

La solution

Vous avez besoin d’un gestionnaire d’événements (il est très facile de faire cela dans jQuery) qui capte les clics pour les étendues de la div et ne déclenche la fonction que, par exemple, si l’étendue a / n'a pas une classe particulière.

Autres conseils

Attribuez à l'ID un événement "attach onclick" et utilisez-le

.

Un exemple jQuery 

$("#spn2").click(function(event){
  event.stopPropagation();  
});

event.stopPropagation () : empêche le bouillonnement de un événement aux éléments parents, empêchant les gestionnaires parents d'être avertis de l'événement.

Il serait logique d’utiliser une bibliothèque, mais sans cela, vous pouvez essayer ceci (édité avec une page entière à tester): 

<html><head></head>
<body>
<script type="text/javascript"><!--
function manualToggle(val)
{
    alert(val.id);
}

--></script>

<div id="test" onclick="manualToggle(this);">
    <span>Allowed to click</span>
    <span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
    <span>Allowed to click</span>
</div>
</body>
</html>

avec mootools , vous pouvez utiliser la méthode stopPropagation : 

$('myChild').addEvent('click', function(ev){
    ev.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});

voir http://mootools.net/docs/core/Native/ Event # Event: stopPropagation

voyez également cette question très similaire: Comment puis-je empêcher un événement onclick de se déclencher pour l'élément parent lorsque l'enfant clique dessus?

Je viens d'avoir le même problème et je ne pouvais pas faire fonctionner jQuery, alors j'ai utilisé un langage Javascript simple: 

document.getElementById("your_span").addEventListener("click", (event) => {
    event.stopPropagation();
});

Cela a fait le tour pour moi. De toute évidence, vous devez ajouter le addEventListener à chaque élément auquel vous souhaitez appliquer cela. Depuis que je fais beaucoup de manipulations DOM, ce n'était pas un problème pour moi. J'espère que cela aide quelqu'un:)

Solution possible: indiquez l'ID de la plage et vérifiez si vous pouvez cliquer sur l'ID cliqué dans votre fonction

mauvaise idée: vous ne savez pas sur quelle période vous avez cliqué, car vous appelez la fonction depuis votre div ...

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top