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 相关文章推荐
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python for i in range ()用法详解
2020/09/18 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
python与idea的集成的实现
2020/11/20 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
晚会开场白和结束语
2015/05/29 职场文书
男人帮观后感
2015/06/18 职场文书
休学证明范本
2015/06/19 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
Java Redisson多策略注解限流
2022/09/23 Java/Android