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

Appliquer un onmouseout sur un conteneur ET ses éléments - HTML/CSS - Programmation

Marsh Posté le 19-07-2007 à 10:54:42    

Hello
 
J'ai un truc du genre ça :

Code :
  1. <div> 
  2.  <h1>bla</h1> 
  3.  <ul> 
  4.   <li>yeah</li> 
  5.   <li>yo</li> 
  6.  </ul> 
  7. </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
Reply

Marsh Posté le 19-07-2007 à 10:54:42   

Reply

Marsh Posté le 19-07-2007 à 11:03:22    

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

 

Sinon voila une petit exemple:

Code :
  1. <html>
  2. <head>
  3.   <script type="text/javascript">
  4.    window.onload= function (){
  5.      document.getElementById('A').onmouseover = function(){
  6.       this.style.backgroundColor = 'purple';
  7.      }
  8.      document.getElementById('A').onmouseout = function(){
  9.       this.style.backgroundColor = 'red';
  10.      }
  11.    }
  12.   </script>
  13. </head>
  14. <body>
  15.    <div id="A" style="background-color: red">
  16.     <div>
  17.     <h1>bla</h1>
  18.     <ul>
  19.      <li>yeah</li>
  20.      <li>yo</li>
  21.     </ul>
  22.     </div>
  23.    </div>
  24. </body>
  25. </html>


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

Marsh Posté le 19-07-2007 à 11:13:54    

anapajari a écrit :

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

 

Sinon voila une petit exemple:

Code :
  1. <html>
  2. <head>
  3.   <script type="text/javascript">
  4.    window.onload= function (){
  5.      document.getElementById('A').onmouseover = function(){
  6.       this.style.backgroundColor = 'purple';
  7.      }
  8.      document.getElementById('A').onmouseout = function(){
  9.       this.style.backgroundColor = 'red';
  10.      }
  11.    }
  12.   </script>
  13. </head>
  14. <body>
  15.    <div id="A" style="background-color: red">
  16.     <div>
  17.     <h1>bla</h1>
  18.     <ul>
  19.      <li>yeah</li>
  20.      <li>yo</li>
  21.     </ul>
  22.     </div>
  23.    </div>
  24. </body>
  25. </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
Reply

Marsh Posté le 19-07-2007 à 11:21:31    

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

Code :
  1. <html>
  2. <head>
  3.   <script type="text/javascript">
  4.    window.onload= function (){
  5.      document.getElementById('A').onmouseover = function(){
  6.       this.style.backgroundColor = 'purple';
  7.      }
  8.      document.getElementById('A').onmouseout = function(){
  9.       this.style.backgroundColor = 'red';
  10.      }
  11.      document.getElementById('B').onmouseover = function(){
  12.        this.style.backgroundColor = 'green';
  13.      }
  14.      document.getElementById('B').onmouseout = function(){
  15.        this.style.backgroundColor = 'yellow';
  16.      }
  17.    }
  18.   </script>
  19. </head>
  20. <body>
  21.    <div id="A" style="background-color: red">
  22.     <div>
  23.     <h1 id="B">bla</h1>
  24.     <ul>
  25.      <li>yeah</li>
  26.      <li>yo</li>
  27.     </ul>
  28.     </div>
  30.    </div>
  31. </body>
  32. </html>

Message cité 1 fois
Reply

Marsh Posté le 19-07-2007 à 11:43:29    

anapajari a écrit :

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

 

nouvel exemple:

Code :
  1. <html>
  2. <head>
  3.   <script type="text/javascript">
  4.    window.onload= function (){
  5.      document.getElementById('A').onmouseover = function(){
  6.       this.style.backgroundColor = 'purple';
  7.      }
  8.      document.getElementById('A').onmouseout = function(){
  9.       this.style.backgroundColor = 'red';
  10.      }
  11.      document.getElementById('B').onmouseover = function(){
  12.        this.style.backgroundColor = 'green';
  13.      }
  14.      document.getElementById('B').onmouseout = function(){
  15.        this.style.backgroundColor = 'yellow';
  16.      }
  17.    }
  18.   </script>
  19. </head>
  20. <body>
  21.    <div id="A" style="background-color: red">
  22.     <div>
  23.     <h1 id="B">bla</h1>
  24.     <ul>
  25.      <li>yeah</li>
  26.      <li>yo</li>
  27.     </ul>
  28.     </div>
  30.    </div>
  31. </body>
  32. </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
Reply

Marsh Posté le 19-07-2007 à 11:46:20    

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
Reply

Marsh Posté le 19-07-2007 à 11:53:24    

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 [:airforceone] 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
Reply

Marsh Posté le 19-07-2007 à 12:03:04    

mais c'est normal !!!!  
et là je me dis qu'on se comprend pas depuis le début, je dois être over pas clair :o  
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

Reply

Marsh Posté le 19-07-2007 à 14:36:42    

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
Reply

Marsh Posté le 19-07-2007 à 14:59:18    

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

Reply

Marsh Posté le 19-07-2007 à 14:59:18   

Reply

Marsh Posté le 19-07-2007 à 15:14:54    

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
Reply

Marsh Posté le 19-07-2007 à 15:16:52    

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.

Reply

Marsh Posté le 19-07-2007 à 15:23:17    

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
Reply

Marsh Posté le 19-07-2007 à 15:27:04    

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
Reply

Marsh Posté le 19-07-2007 à 15:31:47    

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
Reply

Marsh Posté le 19-07-2007 à 15:56:52    

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


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

Marsh Posté le 19-07-2007 à 16:07:40    

Yep :o

 

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 :
  1. bytefx.$event(conteneur, 'onmouseout', function(e){ 
  2.         if (!e) var e = window.event;
  3.         var relTarg = e.relatedTarget || e.toElement;
  4.         var evTarg = e.target || e.srcElement; //menu_styles.ev_conteneur; //
  5.         alert(evTarg.getAttribute('id')+' - '+evTarg.nodeName);
  6.         
  7.         pere = relTarg;
  8.         isChildOfTheLord = false;
  9.         for(pere = relTarg; pere!=null; pere = pere.parentNode)
  10.              if (pere==evTarg) {
  11.                 isChildOfTheLord = true;
  12.                 break;
  13.             }
  14.         
  15.         if (isChildOfTheLord) alert('found'); else alert('not found');
  16.                     
  17.         if (!isChildOfTheLord) {
  18.                         alert('mouseout !!!!!!');
  19.             menu_styles.open_row(-1, true); 
  20.         }
  21.     } ) ;


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
Reply

Marsh Posté le 19-07-2007 à 16:24:30    

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
Reply

Marsh Posté le 19-07-2007 à 16:25:21    

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
Reply

Marsh Posté le 19-07-2007 à 16:55:10    

\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é ;)

Reply

Marsh Posté le 19-07-2007 à 18:07:55    

Spa faux :D
 
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
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed