这篇文章主要介绍了 JS 获取鼠标坐标位置的方法, 结合实例形式分析了 JavaScript 常见的获取鼠标页面、屏幕等坐标位置的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例分析了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0217/267487.html