DOM Level 0-Ereignis: Wie kann verhindert werden, dass der äußere Klick ausgelöst wird?

Question

Überprüfen Sie den folgenden Code ein:

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!');">Tha button</button>, Click me! 
</div>​​​​ 

Gibt es eine Möglichkeit, die äußere div von Brennen eines Onclick zu verhindern, wenn ich auf die Schaltfläche klicken? Irgendeine Idee, wie man Ereignisse von DOM-Niveau 0 annulliert?

Anmerkung: Ich kann jQuery nicht verwenden. Es muss an Chrome, FireFox, IE6-9 arbeiten.

Answer 1

Ja. In den meisten Standard-Browsern, Sie stopPropagation auf das Ereignis-Objekt aufrufen (live example | source):

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!'); event.stopPropagation();">Tha button</button>, Click me! 
</div>​​​​ 

Bei älteren Kopien von IE, haben Sie die cancelBubble Eigenschaft auf true statt zu setzen:

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!'); event.cancelBubble = false;">Tha button</button>, Click me! 
</div>​​​​ 

. ..was für die breite Kompatibilität Sie müssen testen, mit denen Sie es zu tun haben, was hässlich wird (live example | source):

​<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="alert('Hi, from button!'); if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }">Tha button</button>, Click me! 
</div>​​​​ 

Diese Art von Unterschieden sind, warum ich von den alten Dom0-Stil-Handler empfehle weg immer und eine anständige JavaScript-Bibliothek wie jQuery, Prototype, YUI, Closure oder any of several others verwenden. Diese glätten Unterschiede zwischen Browsern und bieten eine große Menge an nützlichen Funktionen.

Zum Beispiel mit jQuery, diese HTML:

​<div id="theDiv"> 
    <button id="theButton">Tha button</button>, Click me! 
</div>​​​​ 

... und dieses Skript (live example | source):

$("#theDiv").click(function() { 
    alert('Hi, from outer div!'); 
}); 
$("#theButton").click(function(event) { 
    alert('Hi, from button!'); 
    event.stopPropagation(); // Even on IE, jQuery provides this 
}); 

oder häufig mit jQuery, sehen Sie nur Menschen return false; tun in ihrem Ereignishandler. return false; in einem Handler, in jQuery, tut zwei Dinge: Stoppt die Weitergabe und verhindert jede Standardaktion, die das Ereignis gehabt haben könnte (zum Beispiel in einem Klick-Handler auf einem Link). stopPropgation verhindert nicht den Standard.

Aber das ist keine Werbung für jQuery (obwohl es insgesamt eine sehr gute Bibliothek ist). Closure, YUI, Prototype und alle anderen haben ähnliche Funktionen, damit Sie sich nicht um diese Art von Browserinkompatibilität kümmern müssen.

Answer 2

<div onclick="alert('Hi, from outer div!');"> 
    <button onclick="event.stopPropagation(); alert('Hi, from button!');">Tha button</button>, Click me! 
</div>​ 

Was ich hinzugefügt habe, war ein event.stopPropagation(); Was dies tut, ist, stoppt die Blasenbildung