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 相关文章推荐
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
手写实现JS中的new
Nov 07 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php简单图像创建入门实例
2015/06/10 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JS跨域总结
2012/08/30 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python读写配置文件的方法
2015/06/03 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python三方库之requests的快速上手
2019/03/04 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
企业门卫岗位职责
2013/12/12 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
研究生个人学年总结
2015/02/14 职场文书
施工员岗位职责范本
2015/04/11 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Python基本知识点总结
2022/04/07 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server