我的JavaScript代碼有什麼問題？

-2

我正在使用div，並希望它隨鼠標座標移動。我不知道什麼是錯的。或者我使用的方法是錯誤的。請幫忙！我的JavaScript代碼有什麼問題？

<!DOCTYPE html> 
<html> 
<head> 
    <title>JavaScript</title> 
    <script></script> 
    <style> 
     #box{ 
      background:cyan; 
      height:100px; 
      width:100px; 
     } 
    </style> 

</head> 


<body onLoad="placeBox()"> 

    <div id="box"></div> 

    <script> 
    function placeBox(){ 
     var x = event.clientX; 
     var y = event.clientY; 
     var d = document.getElementById('box'); 
     d.style.position = "absolute"; 
     d.style.left = x+'px'; 
     d.style.top = y+'px'; 
    } 
    setInterval("placeBox()", 1); 
    </script> 
</body> 
</html>

來源

2014-01-30 Faiz

'事件'可能是未定義的;其次，請始終將您的問題與控制檯選項卡上顯示的錯誤代碼一起發佈。 – MackieeE

您正嘗試讀取響應時間間隔的事件對象，而不是具有座標的事件。 – Quentin

你在console.log中得到了什麼錯誤（） – Zabs

而不是使用超時，爲mousemove事件使用事件回調。事情是這樣的，以保持其短：

function placeBox(event){ 
    var d = document.getElementById('box'); 
    d.style.position = "absolute"; // This could be set through CSS instead 
    d.style.left = event.clientX + 'px'; 
    d.style.top = event.clientY + 'px'; 
} 

document.addEventListener("mousemove", placeBox);

Demo

注意addEventListener不被舊版本瀏覽器的支持，所以如果你需要這樣的支持，你需要實現類似this爲它工作跨瀏覽器。

來源

2014-01-30 09:44:50

這是我輸入的代碼。簡單而高效。我會建議使用CSS #box {position：absolute}，而不是使用JS。 – enguerranws

@enguerranws這是一個好點，我會添加一個小評論。謝謝！ –

我可以通過隱藏原始光標作爲遊標，但它不會顯示任何效果點擊可以告訴我我該怎麼做？ – Faiz

我不會用setInterval()這一點，但onmousemove應該做的工作。

順便說一句，你不應該通過placeBox（）作爲一個字符串：

setInterval(placeBox(), 1);

而且，一些人說：事件是不確定的在這裏。

來源

2014-01-30 09:39:49 enguerranws

錯誤之處在於：

setInterval("placeBox()", 1);

定義首先你setInterval()功能，然後刪除quoatation痕跡placebox()，加，表明在placebox()函數的返回值，如果你會用它的返回值的函數setInterval()

也許這應該是這樣的：

setInterval(placeBox(), 1);

來源

2014-01-30 09:43:22

function placeBox(){ 
     var x = event.clientX; 
     var y = event.clientY; 
     var d = document.getElementById('box'); 
     d.style.position = "absolute"; 
     d.style.left = x+'px'; 
     d.style.top = y+'px'; 
    }

這裏沒有定義事件。

function move(){ 
    //do something on mouse move 
} 

function addEvent(elm, evType, fn, useCapture) { 
    if (elm.addEventListener) { 
     elm.addEventListener(evType, fn, useCapture); 
     return true; 
    } 
    else if (elm.attachEvent) { 
     var r = elm.attachEvent('on' + evType, fn); 
     return r; 
    } 
    else { 
     elm['on' + evType] = fn; 
    } 
} 

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
     window.onload = func; 
    } 
    else { 
     window.onload = function() { 
      oldonload(); 
      func(); 
     } 
    } 
} 

function init(){ 
    var body = document.getElementsByTagName('body')[0]; 

    addEvent(body, 'mousemove', move); 
} 

addLoadEvent(init);

來源

2014-01-30 09:43:23

我的JavaScript代碼有什麼問題？

回答

相關問題