JS获取鼠标坐标位置实例分析


Posted in Javascript onJanuary 20, 2016

本文实例分析了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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 #Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 #Javascript
高性能JavaScript循环语句和条件语句
Jan 20 #Javascript
详解Javascript模板引擎mustache.js
Jan 20 #Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 #Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 #Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 #Javascript
You might like
如何给phpadmin一个保护
2006/10/09 PHP
15个小时----从修改程序到自己些程序
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
jquery中.add()的使用分析
2013/04/26 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python类继承用法实例分析
2014/10/10 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
倡议书范文格式
2014/05/12 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
人口与计划生育责任书
2015/05/09 职场文书