onmouseout事件不适用于h1标签

我正在尝试onmouseout和onmouseover事件。下面的代码工作正常，如果我删除标签，什么让我感到困惑的是，与标签，只有mouseover发射，而不是鼠标。请指导我做错了什么。onmouseout事件不适用于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>

编辑：好吧，我想我明白我自己的问题。在我的情况下，如果我有嵌套标签，onmouseout事件不会触发。我已经尝试过用相同的代码替换h1标签和div标签。我尝试了几个组合（使用跨度等），只要我在我的第一个div中引入任何标签，onmouseout就停止工作。

有人可以指导我什么问题？我不是要求修复，我只是想了解这个错误的原因。

编辑（2）。另一个更新，如果我添加以下行，现在触发onmouseout事件。

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

来源

2014-06-18 user3751873

DEMO

未捕获的ReferenceError：鼠标移开不定义

你在你的控制台有这个错误。我承认，我更喜欢分开js和html。在你的JS中调用你的事件。

此外，您不需要每次要更改文本时重新创建h1。只需在你的h1中添加一个id，并替换它内部的文本。

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++; 
}

来源

2014-06-18 09:52:18 rottenoats

Grimbode嗨，我打开Firebug的，但我仍然没有看到这个错误。如果你能帮助我理解为什么鼠标不触发，我将不胜感激。你的解决方案工作正常，但我相信我可以从我的这个错误中学习。请指导为什么mouseout事件触发不带h1标签但不带它？ – user3751873

有什么想法吗？ – 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>

来源

2014-06-18 10:05:41

onmouseout事件不适用于h1标签

回答

相关问题