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 框架小结 个人工作经验
Jun 13 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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 addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python 序列的方法总结
2016/10/18 Python
Python实现的购物车功能示例
2018/02/11 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
python Scrapy框架原理解析
2021/01/04 Python
PHP面试题及答案二
2015/05/23 面试题
一套VC试题
2015/01/23 面试题
C# .NET面试题
2015/11/28 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
群教班子对照检查材料
2014/08/26 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
食品卫生管理制度
2015/08/06 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL