用javascript显示鼠标x和y位置

时间:2012-08-30 17:15:38

标签: javascript-events onmousemove

第一个版本没有向我显示x和y并且我得到以下错误:Uncaught TypeError: Cannot read property 'pageX' of undefined第二个版本有效但编码非常相似,无法找到问题。

第一版(不工作)

    <form name ="show">
        <input type="text" name="mouseXField" value="0" size="6">Mouse X Position<br>
        <input type="text" name="mouseYField" value="0" size="6">Mouse Y Position<br>
    </form>

        <script type="text/javascript">

        var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;

        if (!mie) {

            document.captureEvents(Event.MOUSEMOVE);
            document.captureEvents(Event.MOUSEDOWN);
        }


        document.onmousemove = mousePos();
        document.onmousedown = mouseClicked();

        var mouseClick;
        var keyClicked;

        var mouseX = 0;
        var mouseY = 0;

        function mousePos (e) {

            if (!mie) {
                mouseX = e.pageX; 
                mouseY = e.pageY;
            }
            else
                mouseX = event.clientX + document.body.scrollLeft;
                mouseY = event.clientX + document.body.scrollTop;


        document.show.mouseXField.value = mouseX;
        document.show.mouseYField.value = mouseY;

        return true;
        }

        </script> 

第二版(工作)

      <form name="Show">
            <input type="text" name="MouseX" value="0" size="4"> X<br>
            <input type="text" name="MouseY" value="0" size="4"> Y<br>
      </form>


        <script type="text/javascript">

            var IE = document.all?true:false


            if (!IE) document.captureEvents(Event.MOUSEMOVE)


            document.onmousemove = getMouseXY;


            var tempX = 0
            var tempY = 0



            function getMouseXY(e) {
                if (IE) { 

                tempX = event.clientX + document.body.scrollLeft
                tempY = event.clientY + document.body.scrollTop
                } 
                else 
                {  
                 tempX = e.pageX
                 tempY = e.pageY
                }  


                document.Show.MouseX.value = tempX
                document.Show.MouseY.value = tempY

                return true
                }
        </script>     

2 个答案:

答案 0 :(得分:18)

第一眼看到:clientX clientY {} else else { mouseX = event.clientX + document.body.scrollLeft; mouseY = event.clientY + document.body.scrollTop; } document.onmousemove = function (e) {mousePos(e);}; ... function mousePos (e) { ...

}
captureEvents

您还需要将事件发送到函数

addEventListener

检查一下:http://jsfiddle.net/NLsdZ/1/

此外,不推荐使用{{1}},您应该使用{{1}}。更多信息:http://forums.asp.net/t/1576872.aspx

答案 1 :(得分:0)

我也注意到你下面没有上传,或者至少说明你是。

var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;

    if (!mie) {

        document.captureEvents(Event.MOUSEMOVE);
        document.captureEvents(Event.MOUSEDOWN);
    }


    document.onmousemove = mousePos();
    document.onmousedown = mouseClicked();

应该像/或最终为我工作:

 window.onload = function () {
         mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;


    if (!mie) {
         document.captureEvents(Event.MOUSEMOVE);
         document.captureEvents(Event.MOUSEDOWN);
    }
         document.onmousemove = function (e) {mousePos(e);};
         document.onmousedown = function (e) {mouseClicked();};
 };