编程 Javascript

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实现捕获鼠标坐标

- Author -

TomHe789

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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