Comment puis-je empêcher un événement onclick de déclencher l'élément parent lorsque l'on clique sur un enfant?

Je vais avoir deux problèmes liés à l'événement onclick, ils sont un peu similaires, donc je vais leur demander ici.

Première:

J'ai une case à cocher dans un div. L'entrée a un onchange de la fonction et de la div a une fonction onclick.

<div onclick="doSomething()">
     <input type="checkbox" onchange="doSomethingElse()" />
</div>

Le problème est quand j'ai cocher/décocher la case à cocher à la fois doSomething() et doSomethingElse() feu. Toutes les idées de comment arrêter cela de se produire? J'ai essayé de faire un onchange="doSomethingElse(event)" et le doSomethingElse(e) de la fonction, j'ai eu l'e.stopPropagation(); et ça ne marche pas.

Deuxième:

J'ai une image dans un div. La div a une fonction onclick, mais l'image ne fonctionne pas. L'image est, à dessein, plus grande que la div et déborde à l'extérieur de la div.

-----------------------
|        image        |
|   ---------------   |
|   |     div     |   |
|   |             |   |
|   ---------------   |
|                     |
-----------------------

Je veux seulement le onclick de feu si l'utilisateur clique dans les limites de la div de la boîte. Cependant, l'événement onclick déclenche également si vous cliquez sur une partie de l'image qui a débordé à l'extérieur de la div... des idées?

La première question est la plus importante pour moi que la seconde. Mais si quelqu'un peut répondre à la fois ce serait génial!

Merci d'avance pour votre aide,
Matt

source d'informationauteur

  1. 8

    Pour votre première question: IE ne supporte pas stopPropagation()au lieu de cela, vous devez utiliser e.cancelBubble = true. Il suffit de faire une fonction de vérifier d'abord de savoir quelle méthode utiliser (if (e.stopPropagation) {code}).

    Pour votre deuxième question: Peut-être inclure un second div qui gère l'événement click?

    <div><img src="image.jpg"/></div>
<div style="position:absolute" onclick="doSomething();"></div>

    et la position de la deuxième div correctement

  2. 5

    Pour votre deuxième question, vous pouvez obtenir les coordonnées du pointeur de la souris lorsque l'événement click se produit, et de les comparer aux coordonnées de la div. (mise en œuvre effective dépend de la bibliothèque js vous utilisez)

    Pour votre première question, d'arrêter un événement à partir de la formation de bulles, vous devez utiliser

    event.cancelBubble = true;
if(event.stopPropagation) event.stopPropagation();
  3. 2

    Dans votre premier exemple avec une case à cocher à l'intérieur d'un div, onchange n'est pas le même événement onclick afin de l'appelant de l'événement.stopPropagation() dans le onchange gestionnaire ne va pas arrêter de l'extérieur onclick de tir. Vous avez besoin d'un autre gestionnaire onclick sur la case à cocher pour empêcher le clic de remonter.

    <div onclick="doSomething()">
     <input type="checkbox" onclick="event.stopPropagation()" onchange="doSomethingElse()" />
</div>
  4. 1

    Vous avez besoin pour arrêter la propagation. Vous pouvez utiliser jQuery pour cela: L'Arrêt De La Propagation.

  5. 1

    deuxième:

    voir aussi: 

    [img onmousedown="if (!clicking) alert('parent clicked') " ...]

[div onmousedown="clicking = true"
     onclick = " alert('child clicked") "
     onmouseup="clicking = false"
  6. 1

    J'ai eu un problème similaire à votre première question. Mais au lieu d'un <div>, et une case à cocher c'était un tableau. Regarde mon NON de TRAVAIL code:

    <table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="alert('I expect this alert only when Cell_3 is clicked')">Cell_3</td>
  </tr>
<table>

    Cliquant sur Cell_1 ou Cell_2, mon code fonctionne comme je m'y attendais, mais lorsque l'on clique sur Cell_3 pas, car il a montré 2 alertes.

    Le premier était:

    "Je m'attends à cette alerte que lorsqu'Cell_3 est cliqué sur"

    et la deuxième était:

    Je m'attends à une alerte lors de la Cell_1 ou Cell_2 clique dessus mais pas Cell_3.

    Google-ing comment je pourrais gérer cela, j'ai trouvé cette briliant post sur Quirksmode.

    Bien, pour dire les choses simplement, j'ai pu résoudre le puzzle de cette façon:

    <table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="Cell_3Alert(event)">Cell_3</td>
  </tr>
<table>

    Et le Javascript:

    function Cell_3Alert(e) {
  alert('I expect this alert only when Cell_3 is clicked');

  if (!e) var e = window.event; 
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

    Je l'ai testé et il a travaillé sur FireFox 3.6+, IE6+ et google Chrome.

    Espère que cela Aide!

  7. 0

    Pour la deuxième, vous pourriez mettre votre div en face de l'image, et de ne pas avoir les balises d'image à l'intérieur de la div. Cela devrait vous donner la fonctionnalité dont vous avez besoin.

  8. 0

    Je ne suis pas sûr si votre première est une simplification ou pas. Si c'est exactement ce qu'il est, je serais tout simplement supprimer le onClick de la balise div complètement.

    Mais je soupçonne votre réelle cas est plus compliqué donc je ne suis pas vraiment offrir que l'un comme réponse.

    Pour le deuxième cas, j'avais en fait de diviser l'image en cinq sections et ne mettez qu'un seul d'entre eux à l'intérieur de la div, comme suit:

    +------------------------------------------------------+
|                     Image part 1                     |
+------------------------------------------------------+
| Image part 2 | Image part 3 (and div) | Image part 4 |
+------------------------------------------------------+
|                     Image part 5                     |
+------------------------------------------------------+

    Encombrants, je sais, mais j'ai tendance à aller pour les solutions les plus simples en premier.

  9. 0

    Pour le premier essai, également à l'aide d'e.preventBubble() et en renvoyant false à partir du gestionnaire.

    Pour la deuxième, vous pouvez capturer le et cliquez sur vérifier la cible de l'événement. C'est plus facile si vous utilisez une bibliothèque qui normalise des événements comme jQuery, où e.cible vous renvoie l'élément spécifique à l'événement a été déclenché. Une autre option est de mettre le gestionnaire de clic pas sur l'image mais quel que soit le conteneur que vous êtes débordant de l'image.

  10. 0

    Ainsi que ou un alternatative à l'arrêt de la capture de la formation de bulles, chacun de vos fonctions d'événement doit avoir un code qui vérifie que le bon élément a été cliquéutilisez event.targetou event.scrElement dans IE, pour trouver l'élément cliqué.

    Pour votre deuxième question, vous voudrez probablement utiliser un image de la cartequi est le code HTML fourni pour cliquer sur une zone particulière de l'image.

  11. 0

    J'ai eu le même problème. Pour moi, c'était une balise span dans une autre balise span, pour un menu latéral. Les sous-catégories étaient censés basculer ouvrir à chaque fois qu'ils ont cliqué, mais pas lorsque le contenu a été cliqué. Mais en regardant dans les propriétés de l' 'cliquez sur' événement, je pense que j'ai trouvé une solution, et a écrit ceci: 

    function sidebar_click(event)
{
    if (event.target == event.currentTarget)
        event.currentTarget.classList.toggle('open');
}

    Il ne fonctionne que si la cible = currentTarget. La cible est l'élément que vous cliquez sur, currentTarget est l'un gestionnaire d'événement est lié. Si elles sont de la même, il s'exécute, si elle ne l'est pas, il ne le fait pas.

    Espère que cette aide.