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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 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
1 Tube Radio
2021/03/02 无线电
谈谈新手如何学习PHP
2006/12/14 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php session 写入数据库
2016/02/13 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
详解python开发环境搭建
2016/12/16 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
基于python使用tibco ems代码实例
2019/12/20 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
学生党员思想汇报
2013/12/28 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
纪律委员竞选稿
2015/11/19 职场文书
个人道歉信大全
2019/04/11 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫