Événement onclick non détecté avec onmouseover

Version imprimable

Bonjour.

Soit un bouton "Abonné".

L'événement onclick de ce bouton lance une fonction Ajax pour supprimer l'abonnement.

Voici le code du bouton :
Code:

1 2 3 4 5 6 // Le membre connecté suit déjà le votant $html .= '<div id="btn_following_'.$id_votant.'">'; $html .= '<img id="img_btn_following_'.$id_votant.'" src="images/profil/btn_following_'.$la_langue.'.png" onclick="unfollow('.$id_membre_connecte.', '.$id_votant.', \''.$la_langue.'\');" />';
Ainsi, la fonction Ajax se lance quand on clique sur le bouton, la suppression en BDD se fait et le bouton est changé en "Suivre".

Si j'ajoute les événements onmouseover et onmouseout pour changer le bouton "Abonné" en "Se désabonner" au passage de la souris et vice-versa quand la souris quitte le bouton, le changement d'image se fait bien mais le bouton ne fonctionne plus ; on dirait que l'événement onmouseover empêche la détection de l'événement onclick.

Normal ?

Une idée à me soumettre ?

28/04/2012, 01h08
utopman

Bonsoir,

1) pas normal

2) utiliser jquery

:)
28/04/2012, 01h38
Willpower

Citation:

Envoyé par CinePhil

Si j'ajoute les événements onmouseover et onmouseout pour changer le bouton "Abonné" en "Se désabonner"

Peut-on voir ce code "ajouté" qui est vraisemblablement la source du problème ?
28/04/2012, 01h38
CinePhil

Citation:

Envoyé par utopman

2) utiliser jquery

C'est en partie ce que j'essaie de faire mais de quelle manière ?

Citation:

Envoyé par Willpower

Peut-on voir ce code "ajouté" qui est vraisemblablement la source du problème ?

Voilà...
Le bouton est dans une fancybox dont le contenu contient entre autre ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // Le membre connecté suit déjà le votant $html .= '<div id="btn_following_'.$id_votant.'">'; $html .= '<img id="img_btn_following_'.$id_votant.'" src="images/profil/btn_following_'.$la_langue.'.png" onclick="unfollow('.$id_membre_connecte.', '.$id_votant.', \''.$la_langue.'\');" onmouseover="change_btn_following(this, \''.$la_langue.'\', '.$id_membre_connecte.', '.$id_votant.')" onmouseout="change_btn_unfollow(this, \''.$la_langue.'\', '.$id_membre_connecte.', '.$id_votant.')" />'; } else { // Le membre connecté ne suit pas encore le votant $html .= '<div id="btn_follow_'.$id_votant.'">'; $html .= '<img src="images/profil/btn_follow_'.$la_langue.'.png" style="cursor: pointer;" onclick="follow('.$id_membre_connecte.', '.$id_votant.', 0, \''.$la_langue.'\');" />';
Quand le membre suit déjà le votant, le bouton "Abonné" (following) est affiché et si le membre passe la souris sur le bouton, la fonction change_btn_following ci-dessous est lancée :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 /** * change_btn_following * change le bouton following (abonné) en unfollow (se désabonner) * @param id */ function change_btn_following(obj, langue, id_membre_connecte, id_votant) { obj.src = 'images/profil/btn_unfollow_' + langue + '.png'; obj.style.cursor = 'pointer'; var texte = 'unfollow(' + id_membre_connecte + ', ' + id_votant + ', \'' + langue + '\')'; obj.onclick = texte; }
En contrôlant avec Firebug, le nouveau contenu de l'image est juste :

Code:

<img id="img_btn_following_5" onmouseout="change_btn_unfollow(this, 'fr', 16, 5)" onmouseover="change_btn_following(this, 'fr', 16, 5)" onclick="unfollow(16, 5, 'fr');" src="images/profil/btn_unfollow_fr.png" style="cursor: auto;">

Mais si l'utilisateur clique sur ce bouton, l'action prévue pour onclick ne s'exécute pas.

Si je retire les onmouseover et onmouseout de la balise, onclick fait bien son boulot.

Bonjour,
l'affection du onclick dans la fonction change_btn_following annule celle définie dans la balise

Ta déclaration dans la fonction n'est pas correcte il faudrait que tu fasses

Code:

1
2
3
obj.onclick = function(){
  unfollow( id_membre_connecte, id_votant, langue);
}

pour test

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>[Test]</title>
<script type="text/javascript">
function newFct( obj, txt){
  obj.onclick = function(){
      alert('newFct -> ' + txt);
      return false;
    };
}
</script>
</head>
<body>
<a href="#"
  onclick="alert('onclick!'); return false"
  onmouseover ="newFct( this,'Tssst!!!')"
>TEST</a>
</body>
</html>

28/04/2012, 23h27
CinePhil

Effectivement ça fonctionne mieux comme ça, merci.