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的inputlimiter 实现字数限制功能
May 30 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
浅谈Vue数据响应
Nov 05 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 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实现验证码功能
2006/10/09 PHP
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python定位xpath 节点位置的方法
2019/08/27 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
python datetime中strptime用法详解
2019/08/29 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
新手学python应该下哪个版本
2020/06/11 Python
详解Python设计模式之策略模式
2020/06/15 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
国际贸易专业个人鉴定
2014/02/22 职场文书
三项教育活动实施方案
2014/03/30 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
MongoDB使用场景总结
2022/02/24 MongoDB
python 安全地删除列表元素的方法
2022/03/16 Python