我的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代码有什么问题？

回答

相关问题