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之前添加的新语句再次绑定事件。

或仅使用此行代替document.write（@Tom提供）

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

如果你想追加，那就去做

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

Answer 2

请勿使用document.write代替 innerHTML 。请参阅演示链接。

        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.body.innerHTML = "X: " + mouseX + ";Y: " + mouseY + ";  Time: " + new Date();    
            return true;
        }

Demo

谢谢，

阿肖克

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

2 个答案: