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 ajax提交表单数据的两种实现方法
Apr 29 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 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 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
如何编写jquery插件
2017/03/29 jQuery
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
Python求解平方根的方法
2015/03/11 Python
在Python中编写数据库模块的教程
2015/04/29 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
如何教少儿学习Python编程
2020/07/10 Python
python下载的库包存放路径
2020/07/27 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
2014年信贷员工作总结
2014/11/18 职场文书