expérience bouillonnant événement (saviez-vous des balises div et p ne peut pas être imbriquées?)

Je joue avec un barbotage d'événement et est venu sur deux ou trois choses nouvelles pour moi ...expérience bouillonnant événement (saviez-vous des balises div et p ne peut pas être imbriquées?)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html onclick="alert('html')" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/> 
    <title>Frame B Title</title> 
    </head> 

    <body onclick="alert('Click body')" onload="top.ldfunc(window,'B')" class="Resize" id="idB"> 
    <p> Body of frame B</p> 
    <p> 
     <a href="javascript:var display=window.open ('PageC.htm', 'display');">PageC</a> 
    </p> 
    <p id="p1" onclick="alert('Click p')"style="color:#00FF00"> 
some text 
     <div id="IMAGES2" onclick="alert('Click div');"> 
asdfg 
     </div> 
more text 
    </p> 
    <p style="color:red"> 
red 
<p style="color:blue"> 
blue 
</p> 
more red 
</p> 
    </body> 
</html>

D'abord je suis en utilisant div pour regrouper des trucs sans y penser comme un paragraphe comme widgy. J'ai été surpris de constater que les éléments div et p ne peuvent pas être imbriqués. Ils semblent fermer n'importe quel parent. Je n'ai aucune idée de ce à quoi ressemble l'arbre DOM pour cet exemple. La partie "plus rouge" du texte est-elle div? Ensuite, j'ai mis un événement onclick sur la balise html (oui je sais que ce n'est pas mentionné à W3 mais je pensais l'essayer de toute façon) et j'ai été surpris de voir l'événement html se produire avant l'événement body.

BTW, cela passe la validation W3.

Est-ce que p et div sont censés fonctionner de cette façon?
Le tag html peut-il être associé à un clic?
Pourquoi l'événement html s'est-il produit avant l'événement body?
Que dois-je faire pour empêcher l'événement de bouillonner au point que je souhaite traiter?

Source

2010-09-10 Mike D

Le texte "plus rouge" fait partie du corps; ajoutez un style = "color: pink" à l'élément body et voyez par vous-même. –

p dans un div fonctionne très bien, mais il ne fonctionne pas dans l'autre sens (probablement parce que p est utilisé pour maintenir le contenu en ligne).
Oui, la balise html peut avoir un clic.
Ceci est parfois spécifique au navigateur. Link in 4. donne des détails sur la méthode stopPropagation() qui est une bonne alternative. Lire sur la propriété cancelBubble et stopPropagation() pour gérer le bouillonnement. Si vous utilisez jQuery, c'est beaucoup plus facile, je pense que stopPropagation fonctionnerait bien dans jQuery.
Cochez cette (Demos également): http://help.dottoro.com/ljgfjsxd.php

Source

2010-09-10 13:25:56

expérience bouillonnant événement (saviez-vous des balises div et p ne peut pas être imbriquées?)

Répondre

Questions connexes