这篇文章主要介绍了JavaScript获取鼠标点击位置的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了昌邑免费建站欢迎大家使用！
一：鼠标相对于屏幕
如果我们涉及在鼠标点击的位置，比较简单的话，我们就可以获取鼠标点击之后，利用screenX，screenY来确定点击的大致位置，从而判断出与屏幕的上边距和下边距的相对位置，我们不要考虑iframe等一些因素，但是在不同的浏览器中，表现还是很相同的。
例：
function getMousePos(event) {
var e = event || window.event;
return {'x':e.screenX,'y':screenY}
}二：鼠标相对于浏览器的窗口
如果通过以上简单的代码来确定位置，往往这些都还不够，因为在大致的情况下，我们需要得到鼠标相对于浏览器窗口的坐标，分别获取到鼠标现对于窗口的的上边距和左边距，可以利用clientX，clientY表示。
例如：
function getMousePos(event) {
var e = event || window.event;
return {'x':e.clientX,'y':clientY}
}三：鼠标相对于文档
我们可以利用clientX与clientY来得到当前浏览器窗口的坐标，但是这些条件都是由限制的，当我如出现在页面的滚动的情况下，那么相对于文档的坐标怎么办呢，这时候我们只要加上滚动的位移就可以了。
例如：
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
}目前火狐浏览器的问题会简单的多，因为火狐支持pageX,与pageY这两个属性，已经把页面滚动计算在内了。
感谢你能够认真阅读完这篇文章，希望小编分享JavaScript获取鼠标点击位置的方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!
