Web小练习-JavaScript事件的简单练习，监听鼠标的移动

最新推荐文章于 2023-10-24 07:00:00 发布
最新推荐文章于 2023-10-24 07:00:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： web javascript 文章标签： web javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oliver_w/article/details/75044349
版权

一个非常简单的小练习，监听鼠标的移动，获得鼠标的横纵坐标并显示出来。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EventDemo</title>
</head>
<body id="body">
<div id="myDiv">
    <p id="text" style="width: 100% ;height: 800px;background-color: seagreen;text-align: center;color: white">点我</p>
</div>
<script >
    var body=document.getElementById("body");
    var text=document.getElementById("text");
    //监听鼠标移动
    body.onmousemove=function(oEvent){
        if(window.event){
            oEvent=window.event;
        }
        //显示鼠标的横纵坐标
        text.innerHTML=oEvent.clientX+","+oEvent.clientY;
    }
</script>
</body>
</html>

如果有错误或者可以改进的地方，请各位大神指点。

Oliver_W
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
毕业设计&课程设计-这是一个使用Qt封装的全局鼠标、键盘事件监听器的库.zip
01-22
这是一个使用Qt封装的全局鼠标、键盘事件监听器的库，方便程序监听系统中所有的鼠标、键盘事件，就算是当前程序隐藏了、失去焦点了也可以。 qt项目，工具源码，适合毕业设计、课程设计作业，所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！ 软件开发设计：PHP、QT、应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备、移动设备等 操作系统：LInux、IOS、树莓派、安卓开发、微机操作系统、网络操作系统、分布式操作系统等。此外，还有嵌入式操作系统、智能操作系统等。 云计算与大数据：数据集、包括云计算平台、大数据分析、人工智能、机器学习等，云计算是一种基于互联网的计算方式，通过这种方式，共享的软硬件资源和信息可以按需提供给计算机和其他设备。
监听鼠标移入移出
sunxiaobai1的博客
02-11 1291
鼠标移入、移出触发事件实现 移入：mouseenter 移出：mouseleave 例子 $(document).on('mouseenter', '#aaa', function(){ alert("鼠标移入事件！"); }).on('mouseleave', '#aaa', function(){ alert("鼠标移出事件！"); }); ...
鼠标滚动事件，鼠标滚动一下，屏幕滑动一屏
Web_Notes的博客
08-06 1837
思路：1.判断鼠标向上还是向下滚动 2.执行鼠标事件 鼠标滚动事件注册事件资料：https://www.cnblogs.com/wsoft/articles/2856861.html var number = 0 var gd = 0 // 向下滚动还是向下滚动 var scrollFunc = function (e) { gd = e.wheelDelta; } if (document.add
看华为官网有感，使用Javascript、Jquery实现监听鼠标移入移出事件
qq_41317414的博客
01-15 959
在查看华为官网时有感而发，想想是不是应该整理一下鼠标移入移出事件，因为这个功能在写网站时会经常遇到，特此记录，希望对您有所帮助！ 1. 原生JS实现监听鼠标移入移出 2. Jquery实现监听鼠标移入移出 1.原生JS实现监听鼠标移入移出事件 (1) 页面代码 <h2>JS监听鼠标移入移出事件</h2> <button onmouseover="mouseover()">监听移入事件</button> <button onmouseout="mouseo
Web APIs——事件监听以及鼠标事件
最新发布
weixin_48719464的博客
10-24 604
什么是事件？事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮什么是事件监听？就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。
PC 实时监听键盘状态 WEB 实时获取鼠标和键盘的点击状态
Kp0fS的草稿纸
03-19 584
1、键盘回显工具 KeyCastOW 演示+下载_哔哩哔哩_bilibili keycastow.exe - 蓝奏云 请下载https://github.com/brookhong/KeyCastOW 2、我记得记得之前有个网页，现在不知道去哪了。
JavaScript 鼠标事件监听&&触发时机&&触发顺序
jinse29的博客
04-25 6910
先说下触发时机和作用键（左键、右键）
Web API之鼠标事件
Zhang_YingJie的博客
03-14 977
关于事件的监听，我们可以通过进行监听或者通过元素的属性来指定。接下来的所有事件都可以通过上面两种方式注册。事件的捕获与冒泡 ，现在默认都是冒泡阶段注册事件处理程序。
java script监听网页（鼠标监听事件和键盘监听事件）
qq_43920456的博客
07-26 885
先上案例 <script> window.onload = function(){ //监听鼠标 document.onmousedown = function(e){ var e = e || event; console.log(e); } //监听键盘 document.onkeypress = function(e){ var e = e || event;
鼠标点击训练工具
01-02
鼠标点击训练工具。 可以永远设计类游戏的基础训练。 可以设置等级和速度。 资源为源码资源，好用再来
如何实现js拖拽效果及原理解析
11-21
元素拖拽分成3个步骤：按下鼠标，移动鼠标，松开鼠标。 拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置）。然后松开鼠标时，删除移动事件和松开事件，元素完成拖拽。 一开始先监听鼠标按下事件mousedown，事件触发执行mouseHandler函数； div.addEventListener(“mousedown”,mouseHandler); 进入mouseHandler函数后，进行if else if 的判断，如果是按下
javascript监听鼠标滚轮事件浅析
10-25
主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
10-20
主要介绍了Javascript DOM事件操作,结合实例形式总结分析了javascript监听鼠标点击、释放，悬停、离开等操作技巧,需要的朋友可以参考下
javascript移动设备Web开发中对touch事件的封装实例
10-25
主要介绍了javascript移动设备Web开发中对touch事件的封装实例,分别对tap事件、doubleTap事件、longTap事件、swipe事件做了封装,需要的朋友可以参考下
Web小练习-复选框的全选以及反选效果
Oliver_W的博客
07-12 2203
一个Web的小练习代码如下
jQuery与Ajax小练习-二级联动（从Oracle数据库获取数据）
Oliver_W的博客
07-23 1469
之前做了个简单的二级联动小练习，这次算是加强版的吧，希望能对大家有点用处。 //主页面 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="script/jquery-3.1.0.min.js"></script> <script type=
Web小练习-DOM练习，表格行和列的添加，修改指定单元格数据和获取指定行数据
Oliver_W的博客
07-13 1416
练习： 添加三个按钮，三个输入框，一个表格，一个下拉列表。需求： 第一个按钮点击增加表格的行，第二个按钮点击增加表格的列 第一个输入框输入要修改内容的单元格的行数，第二个输入框输入要修改内容的单元格的列数，第三个输入框输入要修改的值 第三个按钮为确认按钮，将三个输入框的数据校验后修改表格的值 点击表格，将所点击的单元格所在的行的数据传入到下拉列中 代码如下：<!DOCTYPE ht
photo-sphere-viewer5.1.5 在viewer里监听鼠标移动事件
06-11
要在 photo-sphere-viewer 5.1.5 的 viewer 中监听鼠标移动事件，可以使用 `mousemove` 事件和 viewer 对象的 `on` 方法。具体实现步骤如下： 1. 获取 viewer 对象： ```javascript var viewer = photoSphere...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值