[js] comment bloquer la propagation d'un evenement

comment bloquer la propagation d'un evenement [js] - HTML/CSS - Programmation

Marsh Posté le 21-07-2006 à 15:36:14    

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
Reply

Marsh Posté le 21-07-2006 à 15:36:14   

Reply

Marsh Posté le 21-07-2006 à 16:25:30    

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:

Reply

Marsh Posté le 21-07-2006 à 16:29:35    

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!

Reply

Marsh Posté le 24-07-2006 à 11:07:11    

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>

Reply

Marsh Posté le 24-07-2006 à 11:32:12    

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

Message cité 1 fois
Reply

Marsh Posté le 24-07-2006 à 11:48:24    

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:  

Reply

Sujets relatifs:

Leave a Replay

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