JS获取鼠标位置距浏览器窗口距离的方法示例


Posted in Javascript onApril 11, 2017

本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法。分享给大家供大家参考,具体如下:

先来看看运行效果图:

JS获取鼠标位置距浏览器窗口距离的方法示例

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style type="text/css">
#test_div {
  width:400px;
  height: 400px;
  background-color: red;
}
</style>
  </head>
  <body>
  <div id="test_div"></div>
  </body>
<script type="text/javascript">
  function mousePos(e){
    e=e||window.event;
    var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome
    var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
    var x=e.pageX||(e.clientX+scrollX);//兼容火狐和其他浏览器
    var y=e.pageY||(e.clientY+scrollY);
    console.log(x,y);
    return {x:x,y:y};
  }
  var test=document.querySelector("#test_div");
  test.onclick=function(e){
    mousePos(e);
  }
</script>
</html>

其中的document.documentElement.scrollLeftdocument.body.scrollLeft分别是ie和chrome的方法,而火狐中的pageX可以直接获取滑动的距离。

PS:这里再为大家提供两款在线参考表工具供大家开发过程中参考使用:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

键盘与鼠标按键的键值对照表:
http://tools.3water.com/table/key_codes_num

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
layui实现动态和静态分页
Apr 28 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 #Javascript
javascript数组去重常用方法实例分析
Apr 11 #Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 #Javascript
vuejs绑定class和style样式
Apr 11 #Javascript
vue监听滚动事件实现滚动监听
Apr 11 #Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
You might like
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
python线程、进程和协程详解
2016/07/19 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
大学生创业计划书的用途
2014/01/08 职场文书
十佳护士先进事迹
2014/05/08 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python实现8种常用抽样方法
2021/06/27 Python