使用JavaScript显示鼠标的x和y位置

Show mouse x and y position with JavaScript

本文关键字：位置 JavaScript 显示鼠标使用更新时间：2023-09-26

第一个版本没有显示x和y，并得到以下错误：

未捕获的类型错误：无法读取未定义的属性"pageX"

第二个版本可以工作，但编码非常相似，找不到问题。

第一个版本（不工作）

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

乍一看：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) {
...

看看这个：http://jsfiddle.net/NLsdZ/1/

此外，不赞成使用captureEvents，应该使用addEventListener。更多信息请点击此处：http://forums.asp.net/t/1576872.aspx

我也注意到你没有在下面加载，或者至少声明你是。

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