Question

我正在使用div并希望它与鼠标坐标一起移动。我不知道出了什么问题。或者我使用的方法是错误的。请帮忙！

<!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>

Answer 1

不使用超时，而是使用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之类的内容，以便跨浏览器工作。

Answer 2

我不会使用setInterval()，但onmousemove应该完成这项工作。

顺便说一句，你不应该将placeBox（）作为字符串传递：

setInterval(placeBox(), 1);

此外，正如其他人所说：事件在这里未定义。

Answer 3

出了什么问题：

setInterval("placeBox()", 1);

首先定义setInterval()函数，然后移除placebox()上的quoatation标记，并在placebox()函数中指示返回值，如果您将使用函数的返回值{ {1}}

也许它应该是这样的：

setInterval()

Answer 4

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);

我的JavaScript代码有什么问题？

4 个答案: