Appliquer un onmouseout sur un conteneur ET ses éléments

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Appliquer un onmouseout sur un conteneur ET ses éléments

theredled

● REC

Hello

J'ai un truc du genre ça :

Code :

<div>
 <h1>bla</h1>
 <ul>
  <li>yeah</li>
  <li>yo</li>
 </ul>
</div>

Je veux mettre un onmouseout sur tout ce bloc.
Mais quand je le mets sur le ul ou sur la div, il n'est pas appliqué aux enfants. Autrement dit, dès que je passe sur un <li>, le "onmouseout" est déclenché [:petrus75] Il n'est donc appliqué que sur la partie du conteneur ne comportant pas d'éléments enfants. Moi je veux qu'il soit valable sur tout le <ul> ou la div

Pourquoi ? comment faire ?

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

Publicité

anapajari

s/travail/glanding on hfr/gs;

ça le fait par défaut [:dawak] .
Tu peux montrer ton code?

Sinon voila une petit exemple:

Code :

<html>
<head>
<script type="text/javascript">
window.onload= function (){
document.getElementById('A').onmouseover = function(){
this.style.backgroundColor = 'purple';
}
document.getElementById('A').onmouseout = function(){
this.style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<div id="A" style="background-color: red">
<div>
<h1>bla</h1>
<ul>
<li>yeah</li>
<li>yo</li>
</ul>
</div>
</div>
</body>
</html>

Message cité 1 fois
Message édité par anapajari le 19-07-2007 à 11:03:40

theredled

● REC

anapajari a écrit :

ça le fait par défaut [:dawak] .
Tu peux montrer ton code?

Sinon voila une petit exemple:

Code :

<html>
<head>
<script type="text/javascript">
window.onload= function (){
document.getElementById('A').onmouseover = function(){
this.style.backgroundColor = 'purple';
}
document.getElementById('A').onmouseout = function(){
this.style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<div id="A" style="background-color: red">
<div>
<h1>bla</h1>
<ul>
<li>yeah</li>
<li>yo</li>
</ul>
</div>
</div>
</body>
</html>

Exact ça marche comme ça ; maintenant rajoute un alert('haha'); dans ton onmouseout, et tu verras qu'il s'active quand tu passes sur les <li> et sur le <h1>

Message édité par theredled le 19-07-2007 à 11:15:50

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

anapajari

s/travail/glanding on hfr/gs;

[:cerveau pingouino] , c'est le alert qui déclenche le mouseout ....

nouvel exemple:

Code :

<html>
<head>
<script type="text/javascript">
window.onload= function (){
document.getElementById('A').onmouseover = function(){
this.style.backgroundColor = 'purple';
}
document.getElementById('A').onmouseout = function(){
this.style.backgroundColor = 'red';
}
document.getElementById('B').onmouseover = function(){
this.style.backgroundColor = 'green';
}
document.getElementById('B').onmouseout = function(){
this.style.backgroundColor = 'yellow';
}
}
</script>
</head>
<body>
<div id="A" style="background-color: red">
<div>
<h1 id="B">bla</h1>
<ul>
<li>yeah</li>
<li>yo</li>
</ul>
</div>
</div>
</body>
</html>

Message cité 1 fois

theredled

● REC

anapajari a écrit :

[:cerveau pingouino] , c'est le alert qui déclenche le mouseout ....

nouvel exemple:

Code :

<html>
<head>
<script type="text/javascript">
window.onload= function (){
document.getElementById('A').onmouseover = function(){
this.style.backgroundColor = 'purple';
}
document.getElementById('A').onmouseout = function(){
this.style.backgroundColor = 'red';
}
document.getElementById('B').onmouseover = function(){
this.style.backgroundColor = 'green';
}
document.getElementById('B').onmouseout = function(){
this.style.backgroundColor = 'yellow';
}
}
</script>
</head>
<body>
<div id="A" style="background-color: red">
<div>
<h1 id="B">bla</h1>
<ul>
<li>yeah</li>
<li>yo</li>
</ul>
</div>
</div>
</body>
</html>

Merci j'avais compris [:dawa]

Maintenant avec le alert sur div#A : http://test.bubblebeat.com/bid/onmouse2.htm

Message édité par theredled le 19-07-2007 à 11:44:05

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

anapajari

s/travail/glanding on hfr/gs;

Mais te sers pas d'un alert [:w3c compliant] ...
je te dis que c'est ça qui fait déclencher l'évenement mouseout...
A la place fais un document.write si tu tiens vraiment à afficher quelque chose

Message cité 1 fois
Message édité par anapajari le 19-07-2007 à 11:46:36

theredled

● REC

anapajari a écrit :

Mais te sers pas d'un alert [:w3c compliant] ...
je te dis que c'est ça qui fait déclencher l'évenement mouseout...
A la place fais un document.write si tu tiens vraiment à afficher quelque chose

Si t'insistes [:airforceone]
http://test.bubblebeat.com/bid/onmouse2.htm
Même chose t'as plein de onmouseout déclenché à l'intérieur de "A".

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

anapajari

s/travail/glanding on hfr/gs;

mais c'est normal !!!!
et là je me dis qu'on se comprend pas depuis le début, je dois être over pas clair
Donc de la lecture bien faite:
http://www.quirksmode.org/js/events_mouse.html
et la partie qui t'interesse sur le out/over te renverra également sur:
http://www.quirksmode.org/js/events_order.html

theredled

● REC

Je comprends à petit peu près, je suis en train de relire, mais du coup la solution ce serait quoi, si je ne veux faire un alert qu'à la sortie du conteneur ?

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

anapajari

s/travail/glanding on hfr/gs;

c'est marqué dans les liens ( cross browsers script)

Publicité

theredled

● REC

Bubbling, capturing, je capte rien, fin si mais je vois pas le rapport avec mon pb [:totoz]

Dans les cross-browser scripts, ils me disent comment savoir d'ou je viens et ou je vais, mais ça je m'en fout dans mon cas [:totoz]

Message édité par theredled le 19-07-2007 à 15:18:09

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

anapajari

s/travail/glanding on hfr/gs;

C'est ce morceau là qui t'interesse:

Citation :

So if you want to know where the mouse comes from in case of mouseover, do:

Grosso Modo tu vas t'amuser à tester si l'element sur lequel le "out" se produit à pour parentNode ton div.

theredled

● REC

Je suis ptet bête , mais ton quote parle de mouseover, et ton explication de out [:sisicaivrai]

edit : a moins que ce qui marche pour le over marche pour le out [:transparency]

Message édité par theredled le 19-07-2007 à 15:24:19

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

theredled

● REC

edit2 : mais dans ce cas-là autant utiliser target/srcElement nan :??:
bon là c'est ce que j'essaye et ça marche pas, le target/srcElement est toujours le gros conteneur, mais bon...

Enfin je comprends tjrs pas bien la source du pb...

Message édité par theredled le 19-07-2007 à 15:29:49

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

theredled

● REC

Ou alors tu veux dire :

dans le onmouseout, je regarde si l'objet pour lequel je "quitte" le conteneur est ou pas un enfant du conteneur c'est ça [:opus dei]

edit : mais c'est super lourd et chiant ça [:le kneu]

Message édité par theredled le 19-07-2007 à 15:33:04

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

anapajari

s/travail/glanding on hfr/gs;

Bon on reprends calmement, et tu m'arrêtes quand je me trompe

ta problèmatique n'est pas d'avoir le même handler de mouseover sur un noeud et ses fils mais que le mouseover sur un fils du noeud ne déclenche mas le onmouseout du noeud père. Do we agree?

Du coup oui, c'est chiant et lourd à faire

Message édité par anapajari le 19-07-2007 à 15:57:07

theredled

● REC

Yep

Mais c'est pourtant super basique

Tout ça pour un micro-détail graphique [:dawa]

La je galère pour voir si l'un des parents est le conteneur...

Code :

bytefx.$event(conteneur, 'onmouseout', function(e){ 
        if (!e) var e = window.event;
        var relTarg = e.relatedTarget || e.toElement;
        var evTarg = e.target || e.srcElement; //menu_styles.ev_conteneur; //
        alert(evTarg.getAttribute('id')+' - '+evTarg.nodeName);
        
        pere = relTarg;
        isChildOfTheLord = false;
        for(pere = relTarg; pere!=null; pere = pere.parentNode)
             if (pere==evTarg) {
                isChildOfTheLord = true;
                break;
            }
        
        if (isChildOfTheLord) alert('found'); else alert('not found');
                    
        if (!isChildOfTheLord) {
                        alert('mouseout !!!!!!');
            menu_styles.open_row(-1, true); 
        }
    } ) ;

Ca marche 1,3x sur 2
(ya tjrs trop de mouseouts quoi)

Message édité par theredled le 19-07-2007 à 16:08:05

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

theredled

● REC

J4AI REUSSI SA M7RRRRREEE µµµ

pb interne a ma classe + faute de frappe.

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

theredled

● REC

MERCI anapajari [:simchevelu]

Message édité par theredled le 19-07-2007 à 16:26:14

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

anapajari

s/travail/glanding on hfr/gs;

\o/ c'est la fête...
On va dire que tu t'en es bien sorti tout seul parce qu'à la relecture de mes posts, on peut pas dire que la limpidité était de mon coté

theredled

● REC

Spa faux

Cela dit j'ai un bug sur les input [:fing fang fung] "Permission refusée d'obtenir la propriété HTMLDivElement.parentNode"... Normalement en JS du moment qu'un objet existe, n'importe quelle propriété retourne qqch (null si elle n'existe pas) non ?

La c'est sur que l'objet existe, je fais une verif...

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Appliquer un onmouseout sur un conteneur ET ses éléments

Sujets relatifs
Elements hérités dans une liste	Tri de tableau sur la fréquence des éléments
Personnaliser les elements d'une combobox	liste simple avec 2 pointeurs sur le premier et le dernier elements
fonction recherche de plusieurs éléments	Intégrer une animation flash à des éléments html
meilleur conteneur niveau temps d'accès	[résolu]Java:Appliquer une methode héritée sur un objet
récupérer les éléments d'un sortable dans PHP	Sélectionner des éléments au sein d'une frame
Plus de sujets relatifs à : Appliquer un onmouseout sur un conteneur ET ses éléments

Page générée en 0.088 secondes