onmouseout 事件不适用于 h1 标签答案

【问题标题】：onmouseout event not working with h1 tagsonmouseout 事件不适用于 h1 标签
【发布时间】：2014-06-18 09:38:04
【问题描述】：

我正在尝试 onmouseout 和 onmouseover 事件。如果我删除标签，下面的代码工作正常，令我困惑的是，使用标签，只有鼠标悬停在触发而不是鼠标悬停。请指导我做错了什么。

<!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 事件。我尝试了相同的代码，只是用 div 标签替换了 h1 标签。一旦我在我的第一个 div 中引入任何标签，我就尝试了几种组合（使用 span 等），onmouseout 停止工作。

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

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

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

【问题讨论】：

标签： javascript onmouseout

【解决方案1】：

DEMO

Uncaught ReferenceError: mouseout is not defined

您的控制台中出现此错误。我承认，我更喜欢将 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++;
}

【讨论】：

嗨 Grimbode，我打开了 Firebug，但我仍然没有看到这个错误。如果您能帮助我理解为什么 mouseout 没有触发，我将不胜感激。您的解决方案工作正常，但我相信我可以从我的这个错误中吸取教训。请指导为什么mouseout事件在没有h1标签但没有h1标签时触发？

【解决方案2】：

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>

【讨论】：