20 Stimmen

Wie onclick-Ereignis in div von Propagierung auf das Dokument zu stoppen?

Ich möchte die Weitergabe des onclick-Ereignisses dieses Divs an das Dokument stoppen? Wenn der Benutzer auf das "div" klickt, erscheinen beide Warnmeldungen: 1) die Warnung des div und 2) die Warnung des Dokuments. Ich möchte die Warnung des Dokuments unterdrücken.

Ich weiß, wie man es mit addEventListener zu tun, aber gibt es eine andere Möglichkeit, es zu tun? Das Problem ist, dass ich nicht weiß, wie ich an das Ereignis herankomme - ich habe es mit "event = element.onclick" versucht, wie unten gezeigt, aber das funktioniert nicht. Wie erhalte ich das Ereignis?

<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>

33voto

Hooray Im Helping Punkte 5124

Ändern Sie Ihre Funktionsdefinition, um das Ereignis einzubeziehen:

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
  }
}

Ändern Sie dann den Aufruf, um das Ereignis einzubinden:

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

2voto

tcooc Punkte 19834

Versuchen Sie 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();

    });
};

0voto

Aaron Butacov Punkte 28433

Fügen Sie das Onclick zum Body-Element hinzu.

0voto

Ashit Vora Punkte 2918

Douglas, Es verhindert, dass das Ereignis in die Höhe geschossen wird.

Sehen Sie sich das an http://jsbin.com/ahoyi/edit

Wenn Sie hier die Warnanweisung auskommentieren, werden beim Anklicken des kleineren Feldes 2 Warnmeldungen angezeigt, sonst nur eine.

Ich hoffe, das hilft.

0voto

Ashit Vora Punkte 2918

Nun, das ist ein Jquery-Code. $("#id") genauso wie document.getElementById("id")

.click Funktion ist gleich addEvent("click", function() { ... } );

also im Grunde die beiden Funktionen dort sind Klick-Handler für Parent und Child DIVs.

Beobachten Sie die Ausgabe, indem Sie die Anweisung "return false;" auskommentieren/entkommentieren.

Ich hoffe, das hilft.

Übrigens, entschuldigen Sie die "$"-Verwechslung.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X