javascript - 使用 document.write 对象渲染鼠标位置

Question

在下面的代码中，

     <script>
            var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
            if(!mie){
                document.captureEvents(Event.MOUSEMOVE);
            }
            document.onmousemove = mousePos;

            var mouseX = 0;
            var mouseY = 0;

            function mousePos(e){
                if(!mie){
                    mouseX = e.pageX;
                    mouseY = e.pageY;
                }
                else{
                    mouseX = e.clientX + document.body.scrollLeft;
                    mouseY = e.clientY + document.body.scrollRight;
                }

                /*document.formex.mousex.value = mouseX;
                document.formex.mousey.value = mouseY;*/
                document.write("X: " + mouseX + ";Y: " + mouseY + ";  Time: " + new Date());    
                return true;
            }
    </script>

<小时/>

预期的输出是为移动时的每个鼠标位置呈现每个新条目。

我可以使用 document.write 对象以一个鼠标位置仅渲染一个条目。有没有更好的渲染方法？

Answer 1

document.write clears the document以及其中的所有事件处理程序

试试这个

<script>
            var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
            if(!mie){
                document.captureEvents(Event.MOUSEMOVE);
            }
            document.onmousemove = mousePos;

            var mouseX = 0;
            var mouseY = 0;

            function mousePos(e){
                if(!mie){
                    mouseX = e.pageX;
                    mouseY = e.pageY;
                }
                else{
                    mouseX = e.clientX + document.body.scrollLeft;
                    mouseY = e.clientY + document.body.scrollRight;
                }

                /*document.formex.mousex.value = mouseX;
                document.formex.mousey.value = mouseY;*/
                document.write("X: " + mouseX + ";Y: " + mouseY + ";  Time: " + new Date());    
document.onmousemove = mousePos;
                return true;
            }
    </script>

观察return true之前添加的新语句以再次绑定(bind)事件。

或者简单地使用这一行而不是document.write(由@Tom提供)

document.body.innerHTML = "X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date();

如果你想追加就这样做

document.body.innerHTML += "X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date() + " </br>";