11480 sujets

JavaScript, DOM et API Web HTML5

bonjour pour élement div et les évenements souris de type click, quelle est la surface concernée par le box model du div ? Y a t il de la documentation sur ça ? cordialement
Modifié par 75lionel (29 Jan 2015 - 21:08)
Modérateur
Salut, Le flux de données, le focus, etc. Smiley cligne

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #conteneur{width: 400px;background: green;}
    #conteneur div{width: 20px;height: 20px;background: red;}
    .left{float:left}
    .right{float:right}
    </style>    
</head>
<body>
    <div id="conteneur">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <script>
        
        document.getElementById('conteneur').onclick = function(){
            alert("J'ai cliqué sur le conteneur");
        }
        var flottants = document.querySelectorAll('#conteneur');
        for (var i = 0 ; i < flottants.length ; i++) {
            flottants[ i ].onclick = function(){
                alert("J'ai cliqué sur un enfant du conteneur");
            }
        }
        
    </script>
</body>
</html>
Regarde bien les styles et cliques entres les deux div rouges (pour atteindre le conteneur).
Modifié par niuxe (29 Jan 2015 - 21:28)
salut, pas très bien compris pour ma part. @niuxe> Tu voulais faire

var flottants = document.querySelectorAll('#conteneur div');
? Est-ce qu'il ne te manquerait pas un "overflow:hidden" sur "#conteneur" ou est-ce délibéré pour montrer qu'on ne peut pas ? N'empêche, dans cet exemple, il y a une notion toute aussi intéressante dont on pourrait parler, c'est la propagation de l'évènement. On peut compare ces exemples : exemple1, exemple2 et exemple3.
Modérateur
Zelalsan a écrit :
salut, pas très bien compris pour ma part.
Moi aussi je t'avoue
Zelalsan a écrit :
@niuxe&gt; Tu voulais faire

var flottants = document.querySelectorAll('#conteneur div');
?
Heu oui oups Smiley confused , J'ai codé de tête.
Zelalsan a écrit :
Est-ce qu'il ne te manquerait pas un "overflow:hidden" sur "#conteneur" ou est-ce délibéré pour montrer qu'on ne peut pas ?
En effet, j'ai fait exprès d'omettre l'overflow afin de démontrer ce souci.
Zelalsan a écrit :
N'empêche, dans cet exemple, il y a une notion toute aussi intéressante dont on pourrait parler, c'est la propagation de l'évènement.
+1 J'ai pensé à la même chose que toi. Il y a de bons avantages de casser la propagation mais aussi des inconvénients. Cependant, le sujet est floue. Laissons parler 75lionel.
bonjour
vous répondez exactement à ma question .

J ai fait quelques tests dans chrome .Lorsqu ' un click est géré par un parent div et que les enfants sont des h3 et des div qui gardent la gestion du click (définie au niveau du parent) ; la zone cliquable gérer par le parent change en fonction .
1- de de la zone marging border des enfants . L absence de margin et padding autour de H3 et div enfant rendre difficile la sélection de la zone parent. la zone margin border des enfants semble cliquable et gérer par le parent
2- de la quantité de texte dans div enfants . Cliquer sur les zones sans texte ( dans les div enfant) sont gérés par le parent !!!!
3- pour le h3 la zone h3 avec ou sans texte n'est ( n'a ? ) pas une zone gérer par le parent .
Je me demande si des attributs du div ou h3 explique ce comportement , ou si le texte est considéré comme anonymous ! par le DOM ( difficile de comprendre le contexte .. ) .

J ai testé le code de @niuxe mais en colorant le fond et en ajoutant du texte avant et après le left et le right pour voir le couleur de fond et tester le comportement du click.
Je ne sais pas si la page doit être consulté en http ou en C. En C:// , il semble déja que le comportement du curseur n'a rien a voir avec les zones colorées ce qui semble logique puis que le texte pour un élément html est situé dans un "z-index " supérieur" . Mais bon je croyais que le comportement du curseur ( relatif au click pas à l icone dur curseur) était lié à la zone colorée (box model ) . Cliquer sur zone verte ou rouge avec du texte donne la même réponse !!

@Zelalsan
Les exemples sont vraiment bien ( stop bubbling du parent / capturing ?) et précisent / complètent celui de @niuxe (overflow) .Ou est documenté le rôle de overflow et plus généralement des attributs/valeurs css sur la capture du click (ma question était aussi sur la zone cliquable par rapport à la couleur ( "solid" border padding ET "transparent" pour margin) .

J ai constaté dans un de mes layouts que un div supérieur rognait sur un "div" inférieur et que cela empêchait la capture du click ( javais beau cliquer sur le lien contact rien ne s executait). Si je me rappelle bien ; je pense que ceci était du à la zone marging qui était invisible pour l' oeil mais pas pour l 'évènement souris !!! surtout que les 2 div en question n'étaient pas dans la même hiérarchie DOM !

Il doit bien y avoir une documentation sur la relation entre un element html/box model et la zone réellement cliquable gérer par cet élément lorsque celui contient des éléments qui gèrent eux même l'évênement click .

j' avais d autres questions : que devient la zone cliquable ( boudingbox ? , shape) lorsque
1) le div a un shape défini par un css ( triangle ) ?
2) on utilise un shape path svg circle ?

J'espère être compréhensible .
Merci
Modifié par 75lionel (01 Feb 2015 - 12:53)
Bonjour
quelques liens qui répondent à mes questions sur le comportement des zones ( edge) par rapports aux events ( html /svg/vml ? ) .
pointer event ( caniuse ), animation event , SVG , . marging and clik event , aera tag , clik event ( le plus complet des liens ) .

Je réalise qu il y a structure, présentation, comportement (event ) EN UTILISANT tag( html svg css), DOM/CSSOM/ (SVGOM?) et javascript . Les spécifications sont utilisées d abord par les programmeurs des moteurs des navigateurs ( moins en moins nombreux) et c'est la raison pour laquelle la documentation sont très indigeste pour les designers ( encore que les gobelin recrute en entré des informaticiens bac+2 !! ) . Enfin à l'utilisatio nde ces 6 noms, il s'ajoute la notion de contexte /référence ( portée d'un style avec shadowDOM et Coordonnée de référence identique au concept porté d'une variable en javascript ) .

Y a t il une documentation digeste sur les évênements et les zones réactives ?
merci
Modifié par 75lionel (01 Feb 2015 - 12:51)
Modérateur
Salut,

Je t'avoue que je t'ai perdu dans ton premier message. Il aurait fallu que tu démontres par un/des bout/s de code/s.

En ce qui concerne la zone réactive, nous t'avons démontré le fondement d'un flux html. Sans ça, tu auras aucun événement sur/dans cette zone (masquée). Pour ce qui est des événements, je te renvois tout simplement sur cette page où tu trouveras une multitude d'article sur le sujet. Tu peux chercher par ordre de tes préférences.
La discussion portait bien sur sur les zones crées réagissant aux events modifiables par javascript et par le code css .

Merci