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.load载入页面实现局部刷新
Jan 22 Javascript
js自定义回调函数
Dec 13 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
js定时器实例分享
Dec 20 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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 explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
js闭包实例汇总
2014/11/09 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python with的用法
2014/08/22 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
详解Django配置优化方法
2019/11/18 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
python中shell执行知识点
2020/05/06 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
C#软件工程师英语面试题
2015/06/07 面试题
2014年采购员工作总结
2014/11/18 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
道士塔读书笔记
2015/06/30 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle