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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
vue-axios使用详解
May 10 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 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
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
护理助产毕业生的求职信
2014/03/02 职场文书
护士求职自荐信范文
2014/03/19 职场文书
继承公证书
2014/04/09 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年工程部工作总结
2014/11/25 职场文书
店铺转让协议书
2014/12/02 职场文书
求职推荐信范文
2015/03/27 职场文书
小学德育工作总结2015
2015/05/12 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang