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 表单下所有元素的隐藏
Jul 25 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
ExpressJS入门实例
Jan 14 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 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 file_exists无效的解决办法
2013/06/26 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP实现递归的三种方法
2020/07/04 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python简单区块链模拟详解
2019/07/03 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python 线程的五个状态
2020/09/22 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
妈妈的账单教学反思
2014/02/06 职场文书
老同学聚会感言
2014/02/23 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
作风建设演讲稿
2014/05/23 职场文书
出国留学自荐信模板
2015/03/06 职场文书
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers