在浏览网页时，我们有时候会在页面中进行一些点击操作，为了更好的用户体验，会需要在鼠标点击后进行一些页面元素的不同响应，那么这是怎样获取到鼠标点击的坐标的呢？
这里以简单的js代码实现为例：
首先为了更便捷的使用js语句我们可以先引用jQuery.js
<script src="jQuery.js"></script>
代码1：
<script type="text/javascript">
$(document).click(
function(djwz){
djwz = djwz || window.djwz;
var x = djwz.offsetX || djwz.originalEvent.layerX;
var y = djwz.offsetY || djwz.originalEvent.layerY;
alert("当前坐标 x:"+x+"; y:"+y);
}
);
</script>
这里我们主要用到了jQuery中事件对象的offsetX与offsetY属性，它们可以快速的获取鼠标相对于点击事件的元素的X与Y坐标,主要在ie、chrome、Safari中有效.
或者通过djwz对象的属性originalEvent.layerX，也可以实现.
当然我们也可以通过其它属性获得更多的鼠标在页面中的坐标参数：
假设鼠标点击时间或的对象djwz.
那么djwz.clientX与djwz.clientY，就可以得到鼠标相对当前浏览器窗口的可视区域的X与Y坐标，不包括工具栏与滚动条.
djwz.pageX、djwz.pageY与clientX、clientY比较相似，都是鼠标在网页页面上的位置,从页面的左上角开始计算,但它不随页面的滚动条的移动变化.
djwz.screenX与djwz.screenY，获得鼠标相对于当前的显示器的整个屏幕左上角的X,Y坐标。也就是说整个屏幕的左上角坐标为x:0、y:0.
当然如果需要检测了解页面所有点击元素中的出站链接，可以使用友情链接检测器.
如果需要在页面中模拟一个鼠标事件又该怎样实现呢？
<script type="text/javascript">
var djdwxy = function(){
var danjiys = document.createEvent("MouseEvents");
danjiys.initMouseEvent("click", true, true, window, 1, 0, 0, 90, 80, false, false, false, false, 0, null);
document.body.dispatchEvent(danjiys);
}
djdwxy();
</script>
主要用到了js中initMouseEvent方法创建鼠标的初始化属性值。
initMouseEvent(参数1, 参数2, 参数3, 参数4, 参数5, 参数6, 参数7, 参数8, 参数9, 参数10, 参数11, 参数12, 参数13, 参数14, 参数15);
其中initMouseEvent中:
参数1设置事件的类型：click单击、mousedown鼠标按下、mouseup鼠标放下、mouseover鼠标移出、mousemove鼠标移动等.
参数2设置是否允许冒泡。
参数3是否可以阻止事件默认行为
参数4指定事件的对象引用，一般默认为window对象
参数5鼠标的点击数量
参数6、7距离屏幕的x坐标、y坐标
参数8、9距离客户端x坐标、y坐标
参数10、11、12、13、14分别依次表示为：control键是否被按下、alt键是否被按下、shift 键是否被按下、meta窗口键是否被按下、鼠标按键值button。
参数15定义事件的相关对象,如 mouseover、mouseout等，一般为null。
原理也很简单，通过createEvent()方法创建新的鼠标event对象,initMouseEvent()初始化鼠标事件的对象常规的点击参数值，然后再使用dispatchEvent给document.body对象指定一个鼠标事件即可模拟鼠标事件.