2014-04-11 4 views
1

onmousedown, onmouseup 및 onclick 이벤트와 관련하여 w3schools에 대한 다음 정보를 찾습니다. onmousedown, onmouseup 및 onclick 이벤트는 모두 마우스 클릭의 일부입니다. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 트리거 된 다음 마우스 버튼을 놓으면 onmouseup 이벤트가 트리거되고 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 트리거됩니다.왜 onmouseup의 효과가 효과가 없습니까?

나중에 테스트를 위해 다음 코드를 작성했지만 onmouseup 이벤트가 발생하지 않습니까? 클릭 한 후에 만 ​​'클릭'만 표시되지만 '고맙습니다.'라는 메시지는 표시되지 않습니다. 누구든지 나를 위해 그것을 분명히 해줄 수 있었습니까? 고맙습니다.

<!DOCTYPE html> 
<html> 
<body> 

<div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick = "mClick(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div> 

<script> 
function mClick(obj) 
{ 
    obj.style.backgroundColor="#ec5ead"; 
    obj.innerHTML="Clicked" 
} 
function mDown(obj) 
{ 
    obj.style.backgroundColor="#1ec5e5"; 
    obj.innerHTML="Release Me" 
} 

function mUp(obj) 
{ 
    obj.style.backgroundColor="#FFFFFF"; 
    obj.innerHTML="Thank You a lot" 
} 
</script> 

</body> 
</html> 
+2

* 내용이 * 대체 *되었으므로; 'mouseup' 이벤트가 발생하면'click' 이벤트가 발생합니다 ('mouseup' 이벤트의 효과를 볼 수 없을 정도로 빠름). 새 값을 설정하는 대신 innerHTML 속성에 추가하면 어떻게됩니까? –

+0

부수적으로 w3schools가 아닌 다른 참조를 고려하고 싶을 수도 있습니다 ... –

+0

그런 일이 발생합니다. 당신은 단지 텍스트를 클릭해야합니다 –

답변

3

MouseUp 이벤트 당신이 고맙다 메시지를 볼 수있는 기회를 얻을하지 않도록 그것은, 그것은 바로 클릭 이벤트 뒤에 뿐이다, 발사합니다. onclick 핸들러를 제거하면 메시지가 표시됩니다.

1

동일한 요소에서 mousedown 및 mouseup을 모두 누르면 요소를 클릭하는 것입니다. mouseup 이벤트가 트리거되고 있지만 마지막으로 click 이벤트가 발생합니다.