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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
Angular路由简单学习
Dec 26 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
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
桌面中心(三)修改数据库
2006/10/09 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Python的print用法示例
2014/02/11 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
思想汇报范文
2013/11/04 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
2014信息公开实施方案
2014/02/22 职场文书
学习十八大报告感言
2014/02/28 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
路政管理求职信
2014/06/18 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
财产分割协议书范本
2014/11/03 职场文书
2014年营销工作总结
2014/11/22 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript