JS获取鼠标坐标位置实例分析
更新时间：2016年01月20日 15:24:05 作者：leo列
这篇文章主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例分析了JS获取鼠标坐标位置的方法。分享给大家供大家参考，具体如下：
取鼠标坐标位置有这些：鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY)，其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置(screenX,screenY)在所有的浏览器中都支持，但是鼠标在页面的坐标位置(pageX,pageY)在IE8及更早版本不支持，但是没有关系，可以通过scrollLeft 和 scrollTop可以计算出pageX,pageY的值。
首先是跨浏览器的事件对象
var EventUtil = {
addHandler:function(elem,type,handler){
if(elem.addEventListener)
{
elem.addEventListener(type,handler,false);
}else if(elem.attachEvent)
{
elem.attachEvent("on"+type,handler);
}else
{
elem["on"+type]=handler;
}
},
removeHandler:function(elem,type,handler){
if(elem.removeEventListener)
{
elem.removeEventListener(type,handler,false);
}else if(elem.detachEvent)
{
elem.detachEvent("on"+type,handler);
}else
{
elem["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event,preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
1.视口坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
event = EventUtil.getEvent(event);
alert("Client coordinages: "+event.clientX+","+event.clientY);
});
2.屏幕坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: "+event.screenX+","+event.screenY);
});
3.页面坐标位置
var div = document.getElementById("myDiv");
EventUtil(div,"click",function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX;
var pageY = event.pageY;
if(pageX==undefined)
{
pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
}
if(pageY==undefined)
{
pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
}
alert("Page coordinates: "+pageX+","+pageY);
});
更多关于JavaScript鼠标操作相关内容感兴趣的读者可查看本站专题：《JavaScript鼠标操作技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要为大家介绍了uniapp实现滚动触底加载项目实战方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
这篇文章主要介绍了JS实现的将html转为pdf功能,结合完整实例形式分析了基于浏览器端插件jsPDF实现的HTML格式数据转换成pdf具体操作技巧,需要的朋友可以参考下2018-02-02
利用JavaScript将普通数字转换为带有千分位分隔符格式的多种实现方法
如何利用 JavaScript 将普通数字转换为带有千分位分隔符的格式,我们将介绍多种方法,包括使用内置的 toLocaleString() 方法、Intl.NumberFormat 对象以及自定义函数来实现数字格式化,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了chrome下img加载对height()的影响,需要的朋友可以参考下2014-05-05
在JavaScript中，创建一个具有自定义属性和方法的对象有很多种模式，下面一一进行介绍2012-05-05
这篇文章主要为大家详细介绍了微信小程序排坑指南，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了js实现不提交表单获取单选按钮值的方法,涉及javascript鼠标事件及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
javascript设计模式 – 模板方法模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 模板方法模式原理,结合实例形式分析了javascript模板方法模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
在一个前端页面上，需要通过JavaScript来提交参数，使用JS创建form表单，将参数append到表单中进行提交,接下来将介绍如何操作与实现2013-01-01
这篇文章主要为大家详细介绍了js移动端图片压缩上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
最新评论