javascript - 触发onclick时div不移动？

您能告诉我为什么我的JS无法正常工作吗？

http://prime.programming-designs.com/designs/map/

假设我在地图上单击时将标记div移动到鼠标xy。

最佳答案

打开控制台，您将看到：

未捕获的TypeError：无法读取未定义的属性'MouseX'

在您的JavaScript代码的line 33上，看来document.Show是undefined。

document.Show.MouseX.value = tempX;

而当您click时，您得到以下信息：

未捕获的TypeError：无法读取null的属性“样式”

line 52周围，其中mark是null：

<div id="map" onclick="

mark.style.left = tempX + 'px';
mark.style.top  = tempY + 'px';

">
    <div id="mark"></div>

您可以将整个<script>标记向下移至底部，将其放置在结束的</body>标记内，以便您的document.getElementById('mark');可以找到该元素。

像这样：

<body>
    <div id="map" onclick="

    mark.style.left = tempX + 'px';
    mark.style.top  = tempY + 'px';

    ">
        <div id="mark"></div>
    </div>
    <script type="text/javascript">
    <!--
        var IE = document.all?true:false;
        if (!IE) document.captureEvents(Event.MOUSEMOVE)
        document.onmousemove = getMouseXY;

        var mark = document.getElementById('mark');

        var tempX = 0;
        var tempY = 0;
        function getMouseXY(e) {
            if (IE) { // grab the x-y pos.s if browser is IE
                tempX = event.clientX + document.body.scrollLeft;
                tempY = event.clientY + document.body.scrollTop;
            }
            else {  // grab the x-y pos.s if browser is NS
                tempX = e.pageX;
                tempY = e.pageY;
            }
            if (tempX < 0){tempX = 0;}
            if (tempY < 0){tempY = 0;}

            document.Show.MouseX.value = tempX;
            document.Show.MouseY.value = tempY;
            return true;
        }
    //-->
    </script>
</body>

关于javascript - 触发onclick时div不移动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4753830/