JavaScript 获取鼠标坐标

网上查阅之后的总结，非原创

 

要获取发生事件时鼠标的坐标，可以这样写：

<div id="demo">点击获取鼠标坐标</div>
<script type="text/javascript">
　　document.getElementById("demo").onclick=function(e){
    　　var eve=e;
  　　  var x=eve.x; // X坐标
    　　var y=eve.y;  // Y坐标
   　　 alert("X坐标："+x+"\nY坐标："+y);
}
</script>

 

 

对于 IE8.0 及其以下版本，event 必须作为 window 对象的一个属性。

要取得发生事件时鼠标的坐标，可以这样写：

<div id="demo">点击获取鼠标坐标</div>
<script  type="text/javascript">
　　document.getElementById("demo").onclick=function(){
    　　var eve=window.event;
    　　var x=eve.x;  // X坐标
    　　var y=eve.y;  // Y坐标
    　　alert("X坐标："+x+"\nY坐标："+y);
}
</script>

要想获取与当前事件有关的状态，比如发生事件的DOM元素、鼠标坐标、键盘按键等，就要处理浏览器的兼容问题。

 

 

 

典型代码：

elementObject.onXXX=function(e){
    var eve = e || window.event;  // 使用 || 运算取得event对象
}

这里要注意， || 运算的返回值不一定是 Boolean 类型，当 || 运算的两个操作数中有一个为真时，将返回该操作数本身的值。

改进上面获取鼠标坐标的代码，使它兼容所有浏览器：

<div id="demo">点击获取鼠标坐标</div>
<script  type="text/javascript">
　　document.getElementById("demo").onclick=function(e){
    　　var eve = e || window.event;
    　　var x=eve.x;
   　　 var y=eve.y;
    　　alert("X坐标："+x+"\nY坐标："+y);
}
</script>