Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
940 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [js] comment bloquer la propagation d'un evenement

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[js] comment bloquer la propagation d'un evenement

n°1411176
anapajari
s/travail/glanding on hfr/gs;
Posté le 21-07-2006 à 15:36:14  profilanswer
 

Un bout de code ça sera plus clair :D

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <script type="text/javascript">
  8.   window.onload= function(){
  9.     var nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  10.     for(var i =0; i<nodes.length; i++){
  11.       nodes[i].onmouseover = function(){
  12.         alert(this.tagName);
  13.       }
  14.     }
  15.   }
  16.   </script>
  17. </head>
  18. <body>
  19. <div>
  20.   <p>dlkmsd fsdfmksd mf sdkfmlsdfksdm ds<a href="pouet.html">pouet</a></p>
  21. </div>
  22. </body>
  23. </html>


 
Et là c'est le drame car lors du survol du lien, il m'affiche succèssivement A, P, DIV, ce qui est somme toute logique je vous l'accorde.  
Maintenant comment faire pour que seul le onmouseover du A soit pris en compte lors du survol de A ( et pas ceux de ses noeuds parents).
J'ai bien trouvé une solution dégueu: remonter tous les noeuds parents et annuler les onmouseover, puis lors du onmouseout les remettre. Mais c'est franchement lourd.
Donc si quelqu'un a une autre solution, je suis preneur ;)
 

Message cité 1 fois
mood
Publicité
Posté le 21-07-2006 à 15:36:14  profilanswer
 

n°1411183
gatsu35
Blablaté par Harko
Posté le 21-07-2006 à 16:25:30  profilanswer
 

anapajari a écrit :

Un bout de code ça sera plus clair :D

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <script type="text/javascript">
  8.   window.onload= function(){
  9.     var nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  10.     for(var i =0; i<nodes.length; i++){
  11.       nodes[i].onmouseover = function(){
  12.         alert(this.tagName);
  13.       }
  14.     }
  15.   }
  16.   </script>
  17. </head>
  18. <body>
  19. <div>
  20.   <p>dlkmsd fsdfmksd mf sdkfmlsdfksdm ds<a href="pouet.html">pouet</a></p>
  21. </div>
  22. </body>
  23. </html>


 
Et là c'est le drame car lors du survol du lien, il m'affiche succèssivement A, P, DIV, ce qui est somme toute logique je vous l'accorde.  
Maintenant comment faire pour que seul le onmouseover du A soit pris en compte lors du survol de A ( et pas ceux de ses noeuds parents).
J'ai bien trouvé une solution dégueu: remonter tous les noeuds parents et annuler les onmouseover, puis lors du onmouseout les remettre. Mais c'est franchement lourd.
Donc si quelqu'un a une autre solution, je suis preneur ;)


http://gatsu.ftp.free.fr/html/popu [...] ipale.html :whistle:

n°1411185
anapajari
s/travail/glanding on hfr/gs;
Posté le 21-07-2006 à 16:29:35  profilanswer
 

s'pas beau :o
Parce que moi du coup je suis obligé de me coller un onmouseout sur tous mes objets ... D'ailleurs...
Atta je teste je reviens!

n°1412126
anapajari
s/travail/glanding on hfr/gs;
Posté le 24-07-2006 à 11:07:11  profilanswer
 

2 jours plus tard ... :o
 
Bon même si je voulais eviter la variable en global pour resoudre ce problème, j'ai fini par faire comme dans ton truc gatsu. Seul différence avec le onclick, étant donné qu'il faut gérer le mouseover/out je mets l'objet survolé dans la-dite variable et non juste un booléen.
 
J'en avais besoin, en gros pour faire une demo sur le code html d'une page. ça marche nickel sous FF, mais il y a 2/3 merdouilles sous IE ( par exemple les retours à la ligne sont niqués et il rajoute encore des attributs sur les inputs), mais m'en fous un peu :D
Voila le source(non commenté, et bien gorret par endroit) si ça interesse quelqu'un:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Source html Element</title>
  7.   <script type="text/javascript">
  8.   //<![CDATA[
  9.   var highLightColor = 'red';
  10.   var elOver = null;
  12.   window.onload = function (e){
  13.     var aNode = document.createElement('a');
  14.     aNode.appendChild(document.createTextNode('Demarrer'));
  15.     aNode.setAttribute('id', 'start');
  16.     aNode.setAttribute('href', 'nojs.html');
  17.     aNode.onclick = function (e){
  18.       startDemo();
  19.       return false
  20.     }
  21.     document.getElementsByTagName('body')[0].appendChild(aNode);
  22.   }
  24.   function startDemo(){
  25.     nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  26.     for(var i = 0; i<nodes.length; i++){
  27.       if ( nodes[i].id != 'start' ){
  28.         nodes[i].onmouseover = function (e){
  29.           if ( elOver == null){
  30.             elOver = this;
  31.             this.style.backgroundColor = highLightColor;
  32.             displaySrc(this);
  33.           }
  34.         }
  35.         nodes[i].onmouseout = function(e){
  36.           if ( elOver == this){
  37.             elOver = null;
  38.           }
  39.           this.style.backgroundColor = '';
  40.         }
  41.       }
  42.     }
  44.     var dispContent = document.createElement('div');
  45.     dispContent.setAttribute('id','dispContent');
  46.     var clDemo = document.createElement('input');
  47.     clDemo.setAttribute('type', 'button');
  48.     clDemo.setAttribute('value', 'X');
  49.     clDemo.onclick = endDemo;
  50.     dispContent.appendChild(clDemo);
  51.     var dispNode = document.createElement('div');
  52.     dispNode.setAttribute('id','dispNode');
  53.     dispContent.appendChild(dispNode);
  54.     document.getElementsByTagName('body')[0].appendChild(dispContent);
  56.   }
  57.   function endDemo(){
  58.     document.getElementById('dispContent').parentNode.removeChild(document.getElementById('dispContent'));
  59.     nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  60.     for(var i = 0; i<nodes.length; i++){
  61.       if ( nodes[i].id != 'start' ){
  62.         nodes[i].onmouseover = null;
  63.         nodes[i].onmouseout = null;
  64.       }
  65.     }
  66.   }
  67.   function displaySrc(el){
  68.     try{
  69.       var nodeSrc = ''
  70.       for(var i=0; i<el.attributes.length; i++){
  71.          nodeSrc += el.attributes[i].nodeName+"='"+el.attributes[i].value+"' ";
  72.       }
  73.       nodeSrc = "<"+el.tagName.toLowerCase()+" "+nodeSrc;
  74.       if ( el.innerHTML.length != 0){
  75.         nodeSrc += ">"+el.innerHTML+"</"+el.tagName.toLowerCase()+">";
  76.       } else {
  77.         nodeSrc += "/>";
  78.       }
  79.       nodeSrc = nodeSrc.replace("background-color: "+highLightColor+";", '');
  80.       nodeSrc = nodeSrc.replace(/ style=('|" ){2}/g, '');
  81.       /*** needed for IE ***/
  82.       nodeSrc = nodeSrc.replace(/ [A-z]+=''/g, '');
  83.       nodeSrc = nodeSrc.replace(/ [A-z]+='null'/g, '');
  84.       nodeSrc = nodeSrc.replace(/ hideFocus='false'/, '');
  85.       nodeSrc = nodeSrc.replace(/ disabled='false'/, '');
  86.       nodeSrc = nodeSrc.replace(/ tabIndex='0'/, '');
  87.       nodeSrc = nodeSrc.replace(/ contentEditable='inherit'/, '');
  88.       nodeSrc = nodeSrc.replace(/ +>/, '>');
  89.       /*** end IE ***/
  91.       document.getElementById('dispNode').innerHTML = '<xmp>'+nodeSrc+'</xmp>';
  92.     }
  93.     catch(ex){
  94.       alert("Unknown element" );
  95.     }
  96.   }
  97.   //]]>
  98.   </script>
  99.   <style type="text/css">
  100.   fieldset{
  101.     margin: 10px;
  102.   }
  103.   form{
  104.     padding: 10px;
  105.     background-color: blue;
  106.   }
  107.   #dispContent{
  108.     position: absolute;
  109.     left: 0px;
  110.     bottom: 0px;
  111.     border: 1px solid black;
  112.     margin: 5%;
  113.     width: 90%;
  114.     height: 200px;
  115.     background-color: white;
  116.   }
  117.   #dispNode{
  118.     margin: 5px;
  119.     border: 1px solid black;
  120.   }
  121.   </style>
  122. </head>
  123. <body>
  124. <h1>Demonstation</h1>
  126. <p>Un paragraphe de blabla avec <a href="lien.html">un lien</a></p>
  127. <form action="truc" method="post">
  128.    <fieldset class="f">
  129.      <legend>Champs 1</legend>
  130.      <input type="text" name="f1" id="champs1" value="pouet"/>
  131.    </fieldset>
  132. </form>
  134. <div>
  135.    <p> Blavlfm dcmdlaa <span id="s" style="font-weight:bolder;">span</span></p>
  136. </div>
  138. </body>
  139. </html>

n°1412159
gizmo
Posté le 24-07-2006 à 11:32:12  profilanswer
 

Et pourquoi tu n'utilises pas simplement l'event canceling? http://www.quirksmode.org/js/events_order.html

Message cité 1 fois
n°1412178
anapajari
s/travail/glanding on hfr/gs;
Posté le 24-07-2006 à 11:48:24  profilanswer
 

gizmo a écrit :

Et pourquoi tu n'utilises pas simplement l'event canceling? http://www.quirksmode.org/js/events_order.html


Raaha voila une solution propre comme je les aime :love:  ( sauf evidement la différence d'implémentation IE/FF mais c'est pas comme si c'était surprenant)...
 
Merci bien pour ce lien  :jap:  


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [js] comment bloquer la propagation d'un evenement

 

Sujets relatifs
Bloquer un script pour attendre la fin des traitements[WinForm] ContextMenu : évènement quand le menu disparait
Annuler un évènement javasript (RESOLU)Bloquer l'accès à un fichier utilisé
[WxWidgets] Evènement clavierFaire durer un évènement pendant x jours en php
wxWidgets déclencher un evenement à une date préciseBloquer l'accès d'un répertoire
Détecter un évènement dans une classeBloquer le champ texte d'un input type file
Plus de sujets relatifs à : [js] comment bloquer la propagation d'un evenement

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.093 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR