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实现手把手教你月入万刀(转贴)
Nov 07 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
js实现搜索栏效果
Nov 16 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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与java通过socket通信的实现代码
2013/10/21 PHP
composer.lock文件的作用
2016/02/03 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
vue中的scope使用详解
2017/10/29 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
JS继承实现方法及优缺点详解
2020/09/02 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python进行文件对比的方法
2018/12/24 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Django对models里的objects的使用详解
2019/08/17 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python安装OpenCV的示例代码
2020/03/05 Python
python的flask框架难学吗
2020/07/31 Python
Python try except else使用详解
2021/01/12 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
思想汇报范文
2013/11/04 职场文书
应届生英语教师求职信
2013/11/05 职场文书
大学自我鉴定
2013/12/20 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Python中else的三种使用场景
2021/06/16 Python
详解flex:1什么意思
2022/07/23 HTML / CSS