Chrome Onclick OnMouseOver

Version imprimable

Bonjour

j'ai un petit souci avec google chrome.
Voila sur la meme image je fais du onmouseover et click ce qui rend le script inactive sur google chrome.

Il marche nickel sur FF.
Si j'enleve un des deux marche nickel.
Si je l'appel avec un document ready ca marche aussi nickel.

Je sais que le code n'est pas forcement optimisé mais je debut en javascript et je n'ai pas vraiment réussit avec les jquery plug in comme raty etc..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
function note(id, note)
{
    var i;
    var star = '';
    if (note === 0)
    {
        star = '<img src="img/stars/croix.gif" onclick="del(' + id + ',0);note(' + id + ',0)"><img src="img/stars/vide-left.png" onmouseover="note(' + id + ',1)"><img src="img/stars/vide-right.png" onmouseover="note(' + id + ',2)">  <img src="img/stars/vide-left.png" onmouseover="note(' + id + ',3)"><img src="img/stars/vide-right.png" onmouseover="note(' + id + ',4)">  <img src="img/stars/vide-left.png" onmouseover="note(' + id + ',6)"><img src="img/stars/vide-right.png" onmouseover="note(' + id + ',5)">  <img src="img/stars/vide-left.png" onmouseover="note(' + id + ',7)"><img src="img/stars/vide-right.png" onmouseover="note(' + id + ',8)">  <img src="img/stars/vide-left.png" onmouseover="note(' + id + ',9)"><img src="img/stars/vide-right.png" onmouseover="note(' + id + ',10)">';
 
    }
    else
    {
        star = '<img src="img/stars/croix.gif" onclick="del(' + id + ',0);note(' + id + ',0)">';
        for (i = 1; i <= note; i++)
        {
            if (i % 2 == 1)
            {
                star = star + '<img src="img/stars/pleine-left.png" onmouseover="note(' + escape(id) + ',' + escape(i) + ')" onclick="valide('+ escape(id) + ','+escape(i)/2+')">';
            }
            if (i % 2 == 0)
            {
                star = star + '<img src="img/stars/pleine-right.png" onmouseover="note(' + escape(id) + ',' + escape(i) + ')" onclick="valide('+ escape(id) + ','+escape(i)/2+')">';
            }
        }
        for (i = (note + 1); i <= 10; i++)
        {
            if (i % 2 == 1)
            {
                star = star + '<img src="img/stars/vide-left.png" onmouseover="note(' + escape(id) + ',' + escape(i) + ')" onclick="valide('+ escape(id) + ','+escape(i)/2+')">';
            }
            if (i % 2 == 0)
            {
                star = star + '<img src="img/stars/vide-right.png" onmouseover="note(' + escape(id) + ',' + escape(i) + ')" onclick="valide('+ escape(id) + ','+escape(i)/2+')">';
            }
        }
    }
    note = note / 2;
    document.getElementById('note-' + id).innerHTML = star;
}
function valide(id,note)
{
    var saved=newtotalnote=file('../addnote.php?program_id=' + escape(id)+'&note=' + escape(note));
    if(saved==1)
    {
    var newtotalnote=file('../totalnote.php?program_id=' + escape(id));
    var newtotalnotant=file('../totalnotant.php?program_id=' + escape(id));
    document.getElementById('visuelnote-' + id).innerHTML = '';
    document.getElementById('rate-' + id).innerHTML = newtotalnote+'( '+newtotalnotant+ ')<img src="img/stars/pleine-full.png">';
    generate('Votre note: <b>'+note+'</b> a bien était enleve');
    }
}
function del(id)
{
    var saved=newtotalnote=file('../delnote.php?program_id=' + escape(id));
    if(saved==1)
    {
    var newtotalnote=file('../totalnote.php?program_id=' + escape(id));
    var newtotalnotant=file('../totalnotant.php?program_id=' + escape(id));
    document.getElementById('visuelnote-' + id).innerHTML = '';
    document.getElementById('rate-' + id).innerHTML = newtotalnote+'( '+newtotalnotant+ ')<img src="img/stars/pleine-full.png">';
    generate('Votre note pour le programme : <b>'+id+'</b> a bien était enleve');
    }
}
  function generate(text) {
  	var n = noty({
  		text: text,
  		type: 'warning',
        timeout:2000,
        dismissQueue: true,
  		layout: 'topRight',
  		theme: 'defaultTheme'
  	});
  	console.log('html: '+n.options.id);
  }
 
function file(fichier)
{
    if (window.XMLHttpRequest) // FIREFOX
        xhr_object = new XMLHttpRequest();
    else if (window.ActiveXObject) // IE
        xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return(false);
    xhr_object.open("GET", fichier, false);
    xhr_object.send(null);
    if (xhr_object.readyState == 4)
        return(xhr_object.responseText);
    else
        return(false);
}

Quelqu'un aurait une solution?

Merci

06/08/2013, 19h53
NoSmoking

Bonjour,

Citation:

Si je l'appel avec un document ready ca marche aussi nickel.

cela tendrait à montrer que Chrome est plus lent à créer l'élément dans le DOM.

Place ton script en fin de page avant la balise </body> et dis ce que cela donne.
06/08/2013, 20h32
Boz88

j'ai essaye malheureusement ca ne change rien...
06/08/2013, 23h32
NoSmoking

:koi:
il faudrait un peu plus de code, HTML notamment, pour voir/tester ce qui se passe, une page en ligne serait surement le top.
07/08/2013, 10h17
Boz88

http://dev.lavirgule.tv

Oui c'est plus que bizarre je sais.. :S

J'ai regardé un peu ton code et il faut admettre que la meilleur façon de ne pas faire et ce que tu fais à savoir réécrire le innerHTML d'une balise sur laquelle des événements sont affectés et/ou en cours.

A observer les réactions des navigateurs, il s’avère effectivement que Chrome perde le suivi des événements, on ne pourra pas l'en blâmer.

Je te mets un brouillon que j'avais réalisé afin de voir une des façons de procéder en modifiant la classe des éléments plutôt que le innerHTML du contenant.

Je ne doute pas qu'il existe pas mal de systèmes de notation en javascript, une petite recherche sur la toile devrait te ravir, mais un conseil, change d'approche.

exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Notation au survol</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
.note ul{
  display:inline-block;;
  list-style-type: none;
}
.note ul li{
  display:block;
  float:left;
  width:20px;
}
.note ul li a{
  display:inline-block;
  text-align:center;
  width:20px;
  text-decoration:none;
}
.class_on{
  border:1px solid #ffcc66;
  color:#bb0000;
  background-color: #ffffcc;
}
.class_off{
  border:1px solid #f00;
  color:#888;
  border:1px solid #e0e0e0;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="note_1" class="note">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
</div>
<div id="note_2" class="note">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>
<div id="note_3" class="note">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
</div>
 
<script>
function initNote( id){
 
  var oNote = document.getElementById( id);
  if( !oNote) return null;
  
  var oEtoile = oNote.getElementsByTagName('A');
  var i, k, nb = oEtoile.length;
  //fonction de selection ou non
  function selectNote( obj){
    k = nb -1;
    // affecte le style off
    for( ; k > -1; k--){
      oEtoile[k].className = oEtoile[k].className.replace('on', 'off');
      if( oEtoile[k] === obj) break;
    }
    for( ; k > -1; k--){
      oEtoile[k].className = oEtoile[k].className.replace('off', 'on');
    }
  }
  /////////////////////////////////////////////////
  for( i=0; i < nb; i++){
    oEtoile[i].className += ' class_off';
    oEtoile[i].id = id +'_' +(i+1);
    oEtoile[i].onmouseover = function(){
      selectNote( this);
    }
    oEtoile[i].onmouseout = function(){
      selectNote( null);
    }
    oEtoile[i].onclick = function(){
      oNote.note  = this.id.replace( id +'_', '');
      oNote.oNote = this;
      // supprime le style on
      for( k=0; k < nb; k++){
        oEtoile[k].onmouseout  = function(){
          selectNote( oNote.oNote);
        };
      }
      alert( 'Note attribuée : '+oNote.note);
      return false;
    }
  }
  return true
}
// init des champs note
for(i=1; initNote('note_'+ i);i++){}
</script>
</body>
</html>

14/08/2013, 12h34
sekaijin

oui c'est la première chose que j'ai remarqué

j'ai un objet a avec les méthodes m et n
la méthode m affiche coucou et la methode n supprime l'objet a

je fais un handler sur a qui appelle successivement n et m
a.n supprime a
a.m plante chercher l'erreur

A+JYT

Citation:

Envoyé par NoSmoking

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Notation au survol</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
.note ul{
  display:inline-block;;
  list-style-type: none;
}
.note ul li{
  display:block;
  float:left;
  width:20px;
}
.note ul li a{
  display:inline-block;
  text-align:center;
  width:20px;
  text-decoration:none;
}
.class_on{
  border:1px solid #ffcc66;
  color:#bb0000;
  background-color: #ffffcc;
}
.class_off{
  border:1px solid #f00;
  color:#888;
  border:1px solid #e0e0e0;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="note_1" class="note">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
</div>
<div id="note_2" class="note">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>
<div id="note_3" class="note">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
</div>
 
<script>
function initNote( id){
 
  var oNote = document.getElementById( id);
  if( !oNote) return null;
  
  var oEtoile = oNote.getElementsByTagName('A');
  var i, k, nb = oEtoile.length;
  //fonction de selection ou non
  function selectNote( obj){
    k = nb -1;
    // affecte le style off
    for( ; k > -1; k--){
      oEtoile[k].className = oEtoile[k].className.replace('on', 'off');
      if( oEtoile[k] === obj) break;
    }
    for( ; k > -1; k--){
      oEtoile[k].className = oEtoile[k].className.replace('off', 'on');
    }
  }
  /////////////////////////////////////////////////
  for( i=0; i < nb; i++){
    oEtoile[i].className += ' class_off';
    oEtoile[i].id = id +'_' +(i+1);
    oEtoile[i].onmouseover = function(){
      selectNote( this);
    }
    oEtoile[i].onmouseout = function(){
      selectNote( null);
    }
    oEtoile[i].onclick = function(){
      oNote.note  = this.id.replace( id +'_', '');
      oNote.oNote = this;
      // supprime le style on
      for( k=0; k < nb; k++){
        oEtoile[k].onmouseout  = function(){
          selectNote( oNote.oNote);
        };
      }
      alert( 'Note attribuée : '+oNote.note);
      return false;
    }
  }
  return true
}
// init des champs note
for(i=1; initNote('note_'+ i);i++){}
</script>
</body>
</html>

De grâce, évitez de conseiller l'ajout d'évènements sans event listeners, ainsi que des break/return dans des boucles... :vomi:

14/08/2013, 17h24
SylvainPV

Dans certains cas, un break / return est approprié pour une boucle. Pas ici, certes.

Pour une notation type 5 étoiles, on peut aussi se passer de Javascript:
http://lea.verou.me/2011/08/accessib...with-pure-css/