首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现捕获鼠标坐标

- Author -

TomHe789

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Vue.js中关于侦听器（watch）的高级用法示例
May 02 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
Vscode(3) 2022年7月新番(1) 算法(1) OVERLORD(1) 双人对弈(1) 时钟(1) 人人对战(1) 后端(1) 数据表(1) SSH(3)
You might like
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
微信小程序实现留言板（Storage）
2018/11/02 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
基于python实现微信模板消息
2015/12/21 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
详解重置Django migration的常见方式
2019/02/15 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
python如何遍历指定路径下所有文件（按按照时间区间检索）
2020/09/14 Python
python操作链表的示例代码
2020/09/27 Python
信访工作者先进事迹
2014/01/17 职场文书
大学军训感言800字
2014/02/27 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
交通志愿者活动总结
2014/06/27 职场文书
领导新年致辞2016
2015/07/29 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
muduo TcpServer模块源码分析
2022/04/26 Redis