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 动态添加按钮实现代码
May 06 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Vue Element校验validate的实例
Sep 21 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
PHP4.04简明安装
2006/10/09 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python常用正则表达式符号浅析
2014/08/13 Python
python计算书页码的统计数字问题实例
2014/09/26 Python
Python下Fabric的简单部署方法
2015/07/14 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python实现序列化及csv文件读取
2020/01/19 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
简述数组与指针的区别
2014/01/02 面试题
介绍一下write命令
2012/09/24 面试题
爱国口号
2014/06/19 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
最美乡村教师观后感
2015/06/11 职场文书
银行工作心得体会范文
2016/01/23 职场文书