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標籤

回答

相關問題