2013-06-24 17 views
0

我/一個藝術家想學習編程的一個新項目刪除鼠標移出在JavaScript

我想創建一個程序,其中有被觸發的只有前三種一次鼠標移出警報該函數被調用。這是我的代碼。目前,它被觸發三次:

<!DOCTYPE html> 
<html> 
<head> 
</head> 

<body> 

    <div id="message"> 
    <input type="button" value="CLICK HERE" id="countButton" /> 

    <p style="color: white">The button was pressed <span id="displayCount">0</span> times.</p> 
    </div> 
    <script type="text/javascript"> 
     var count = 0; 
     var button = document.getElementById("countButton"); 
     var display = document.getElementById("displayCount"); 



     button.onclick = function(){ 
     count++; 
     display.innerHTML = count; 

     if (count <=3){ 
      button.onmouseout = function() { 
      alert("  Come on... BACK TO WORK!"); 
      } 
     } 

     else if(count>3){ 
     document.body.innerHTML="" 
     alert("FINALLY!!!"); 
} 
     } 
    </script> 
</body> 
</html> 

這是一個較短版本的程序。您可以在下面的鏈接中看到最終結果(減去鼠標懸停問題):http://www.esmeraldakosmatopoulos.com/blank#!/c1fam 警告:這是非常煩人的...故意。

請幫幫我

謝謝!

+0

這段代碼有什麼問題? – Sergio

回答

0

這裏的基本問題是else部分代碼。它在count <= 3的每次點擊上重新附加mouseout處理程序。

您需要將button.onmouseout = {...}移出onclick處理程序,然後將else放入button.onmouseout = null;

但是,我建議您使用addEventListener()而不是事件屬性。要刪除偵聽器,您可以使用removeEventListener()這樣您可以更好地控制事件處理。