Question

我正在尝试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停止工作。

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

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

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

Answer 1

DEMO

未捕获的ReferenceError：未定义mouseout

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

Answer 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>

onmouseout事件不使用h1标签

2 个答案: