Comment arrêter onclick event dans div de se propager au document?

Je veux arrêter la propagation de cette div à l'événement onclick du document? Lorsque l'utilisateur clique sur le "div", à la fois les alertes apparaissent: 1) la div d'alerte et de 2) le document d'alerte. Je veux supprimer le document d'alerte.

Je sais comment le faire en utilisant la méthode addEventListener, mais est-il une autre façon de faire? Le problème ci-dessous, c'est que je ne sais pas comment m'approprier l'événement, j'ai essayé de l'événement " = element.onclick", illustré ci-dessous, mais cela ne fonctionne pas. Comment puis-je obtenir de l'événement?

<head>
<script>
  function showMenu(element) {
      alert("div clicked");
      event = element.onclick;  //HOW TO GET HOLD OF THE EVENT?
      //Don't propogate the event to the document
      if (event.stopPropagation) {
          event.stopPropagation();   //W3C model
      } else {
          event.cancelBubble = true; //IE model
      }
  }

  document.onclick = function() {
      alert('document clicked');
  };
</script>
</head>

<body>
  <div id="foodmenu" onclick="showMenu(this);">Click inside this div</div>
  or click outside the div.
</body>

source d'informationauteur dougkramer | 2010-06-19

  1. 27

    Changer votre définition de la fonction d'inclure l'événement:

    function showMenu(event, element) {
  alert("div clicked");
  //Don't propogate the event to the document
  if (event.stopPropagation) {
      event.stopPropagation();   //W3C model
  } else {
      event.cancelBubble = true; //IE model
  }
}

    Ensuite modifier l'appel à passer à l'événement:

    div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>
  2. 2

    Essayer EventListeners:

    html:

    <div id="fooddmenu">Click inside this div</div>or click outside the div.​​​​​​​​​​

    js:

    function showMenu(e) {
    alert("div clicked");
}

document.onclick = function() {
    alert('document clicked');
};

window.onload = function(){
    document.getElementById("fooddmenu").addEventListener("click", function(e){
        showMenu(this);
        e.stopPropagation();

    });
};
  3. 0

    Ajouter le onclick de l'élément body.

  4. 0
    $("div").click(function(){
  ...
  ...
  ...

  return false; //this will stop the further propagation of the event
});
  5. 0

    Douglas,
    Il n'mettre fin à l'événement de se bouillonnait.

    Vérifier cela http://jsbin.com/ahoyi/edit

    ici, si vous le commentaire de l'alerte de l'instruction, il va montrer 2 alertes en cliquant sur la petite boîte d'autre un seul.

    Espère que cette aide.

  6. 0

    eh bien, c'est un code jquery.
    $("#id") même en tant que document.getElementById("id")

    .cliquez sur la fonction est la même que addEvent("click", function() { ... } );

    donc, fondamentalement, à la fois les fonctions il y a des gestionnaires de clic pour le Parent et l'Enfant DIVs.

    Observer la sortie par commenter /décommenter le "return false;" instruction.

    Espère que ça aide.

    En passant, désolé pour le "$" de la confusion.