événement onmouseout ne fonctionne pas avec les balises h1

J'essaie des événements onmouseout et onmouseover. Le code ci-dessous fonctionne bien si je supprime des balises, ce qui me déroute est, avec des balises, seul le survol de la souris se déclenche et non le mouseout. S'il vous plaît guider ce que je fais mal.événement onmouseout ne fonctionne pas avec les balises h1

<!DOCTYPE html> 
<html> 
<body> 

<div onmouseout="mouseout();" onmouseover="mouseover();" id="test"><h1> Mouse </h1> </div> 
<div id="count"> </div> 
<div id="count2"> </div> 
<script> 
var textonout = "<h1>Mouse out</h1>"; 
var count =0; 
var out = 0; 
var textonover = "<h1>Mouse Over</h1>"; 
function mouseout() { 

document.getElementById("test").innerHTML = textonout; 
document.getElementById("count2").innerHTML = out++; 
} 
function mouseover() { 
    document.getElementById("test").innerHTML = textonover; 
    document.getElementById("count").innerHTML = count++; 
} 
</script> 

</body> 
</html>

EDIT: Ok, je crois que je comprends ma propre question. Dans mon cas, l'événement onmouseout ne se déclenche pas si j'ai des balises imbriquées. J'ai essayé le même code en remplaçant simplement la balise h1 par une balise div. J'ai essayé plusieurs combinaisons (en utilisant span etc) dès que je présente un tag dans mon premier div, onmouseout cesse de travailler.

Quelqu'un peut-il me guider quel est le problème? Je ne demande pas le correctif, je veux juste comprendre la raison de cette erreur.

EDIT (2). Une autre mise à jour, si j'ajoute les lignes suivantes, maintenant l'événement onmouseout est déclencheur.

function mouseover() { 
    document.getElementById("test").innerHTML = textonover **+ count**; 
    document.getElementById("count").innerHTML = count++;

Source

2014-06-18 user3751873

DEMO

Uncaught ReferenceError: mouseout n'est pas défini

Vous avez eu cette erreur dans votre console. J'avoue, je préfère séparer js et html. Appelez vos événements dans votre JS.

En outre, vous n'avez pas besoin de recréer un h1 chaque fois que vous souhaitez modifier le texte. Ajoutez simplement un identifiant à votre h1, et remplacez le texte à l'intérieur.

HTML:

<div id="test"> 
    <h1 id="h1"> Mouse </h1> 
</div> 
<div id="count"></div> 
<div id="count2"></div>

Javascript:

var h1 = document.getElementById('h1'); 
textonout = "Mouse out"; 
var count = 0; 
var out = 0; 
var textonover = "Mouse Over"; 

var test = document.getElementById("test"); 
test.onmouseout = mouseout; 
test.onmouseover = mouseover; 
function mouseout() { 

    h1.innerHTML = textonout; 
    document.getElementById("count2").innerHTML = out++; 
} 

function mouseover() { 
    h1.innerHTML = textonover; 
    document.getElementById("count").innerHTML = count++; 
}

Source

2014-06-18 09:52:18 rottenoats

Salut Grimbode, je me suis tourné sur Firebug, mais je ne suis toujours pas voient cette erreur. J'apprécierais si vous pouvez m'aider à comprendre pourquoi le mouseout ne déclenchait pas. Votre solution fonctionne bien mais je suis sûr que je peux apprendre de cette erreur. S'il vous plaît guidez pourquoi l'événement mouseout se déclenche sans balise h1 mais pas avec elle? – user3751873

Une idée s'il vous plaît? – user3751873

Follow this , it work perfect. 

<!DOCTYPE html> 
<html> 
<body> 

<h1 id="test"> Mouse </h1> 
<div id="count"> </div> 
<div id="count2"> </div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script> 
<script> 

$(document).ready(function(){ 
    var textonout = "Mouse out"; 
    var count =0; 
    var out = 0; 
    var textonover = "Mouse Over"; 
$("h1").mouseover(function(){ 
    $("h1").css("background-color","yellow"); 
    document.getElementById("count").innerHTML = count++; 
    document.getElementById("test").innerHTML = textonover; 
    }); 
    $("h1").mouseout(function(){ 
    $("h1").css("background-color","lightgray"); 
    document.getElementById("test").innerHTML = textonout; 
    document.getElementById("count2").innerHTML = out++; 
    }); 
    }); 

</script> 

</body> 
</html>

Source

2014-06-18 10:05:41

événement onmouseout ne fonctionne pas avec les balises h1

Répondre

Questions connexes