JavaScript实现捕获鼠标坐标


Posted in Javascript onApril 12, 2020

本文实例为大家分享了JavaScript实现捕获鼠标坐标的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>事件对象</title>
 <style>
  .box1{
   width: 300px;
   height: 100px;
   border: 1px solid #000;
  }
  .box2 {
   width: 150px;
   height: 50px;
   border: 1px solid #000;
   margin-top: 50px;
   padding-top: 10px;
   box-sizing: border-box;
   text-align: center;
  }
 </style>
 <script>
  window.onload = function () {
   var box1 = document.getElementsByTagName("div")[0];
   var box2 = document.getElementsByTagName("div")[1];
   box1.onmousemove = function (event) {
    // 解决IE的兼容性问题
    event = event || window.event;
    box2.innerHTML = "X:" + event.clientX + " Y: " + event.clientY;
   }
  };
 </script>
</head>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
</body>
</html>

JavaScript实现捕获鼠标坐标

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
node内置调试方法总结
Feb 22 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
javascript实现画板功能
Apr 12 #Javascript
JS实现随机点名器
Apr 12 #Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 #Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 #Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 #Javascript
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
js实现简单选项卡功能
2020/03/23 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
python适合做数据挖掘吗
2020/06/16 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
班级旅游计划书
2014/05/03 职场文书
导游词之杭州西湖
2019/09/19 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python