onmouseout 이벤트가 h1 태그와 작동하지 않습니다.

onmouseout 및 onmouseover 이벤트를 시도하고 있습니다. 태그를 제거하면 아래 코드가 제대로 작동합니다. 태그를 사용하면 mouseover 만 실행되고 mouseout은 혼란 스럽습니다. 내가 뭘 잘못하고 있는지 안내해 줘.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은 작동을 멈 춥니 다.

문제는 무엇인가 나를 안내 할 수 있습니까? 내가 수정 프로그램에 대한 질문이 아니에요, 난 그냥이 오류의 이유를 이해하고 싶습니다.

EDIT (2). 또 다른 업데이트, 다음 줄을 추가하면 이제 onmouseout 이벤트가 트리거됩니다.

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

출처

2014-06-18 user3751873

DEMO

catch되지 않은 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>

자바 스크립트 :

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, 나는 방화범이 끌려 켜져하지만 난 여전히이 오류를보고하고 있지 않다. 왜 mouseout이 트리거되지 않았는지 이해하도록 도와 주시면 감사하겠습니다. 귀하의 솔루션은 잘 작동하지만 나는이 오류에서 배울 수 있다고 확신합니다. 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 태그와 작동하지 않습니다.

답변

관련 문제