Event事件-2:mouseenter、mouseleave、mouseover、mouseout鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移动

最新推荐文章于 2024-03-08 15:38:36 发布
最新推荐文章于 2024-03-08 15:38:36 发布
阅读量859 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kino2046/article/details/104886619
版权

mouseenter、mouseleave 鼠标移入移出

        标移入或者移出，不受 子级元素范围干扰

mouseover、mouseout 鼠标移入移出

        如果鼠标移入或者移出 子元素 范围，mouseover 和 mouseout  会触发

clientX、clientY 鼠标位置

        获取鼠标点击的位置（相对于显示区域可视区的位置）

                e.clientX  X轴

                e.clientY  Y轴

pageX、pageY 页面位置

        获取鼠标点击的位置（相对于页面左上角位置）

                e.pageX X轴

                e.pageY Y轴

鼠标跟随案例

contextmenu 鼠标右键

自定义一个右键菜单（另一种案例里找）

on添加事件方法下另一种阻止默认行为  return false

kino2046
关注
专栏目录
获取鼠标的位置
HAI6545的博客
12-28 598
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
JavaScript（五）（事件/Event/DragEvent/session/scroll）
qq_43456781的博客
07-25 629
JavaScript（五）（事件） 文章目录JavaScript（五）（事件）七、事件43. EventTarget 接口43.1 概述43.2 EventTarget.addEventListener()43.3 EventTarget.removeEventListener()43.4 EventTarget.dispatchEvent()44. 事件模型44.1 监听函数44.1.1 HTML 的 on- 属性44.1.2 元素节点的事件属性44.1.3 EventTarget.addEventLis
获取当前鼠标所在位置
passing_travller的博客
12-24 586
获取当前鼠标所在位置 <style> .map { width: 100%; height: 400px; } </style> 当前的坐标：
fullcalendar组件（日历组件）的鼠标点击事件（eventMouseEnter，eventMouseout），鼠标滑过日程出现浮窗
最新发布
lswlovejrd的博客
03-08 1888
fullcalendar组件（日历组件）的鼠标点击事件（eventMouseEnter，eventClick，eventMouseout），鼠标滑过日程出现浮窗，显示日程详情。
【JavaScript 进阶之旅 DOM篇 第九章】鼠标行为、pageX|Y封装、拖拽事件封装
马云
06-11 247
兼容性封装
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
ColdCoder的博客
06-15 1339
鼠标事件 MouseEvent
JavaScript事件类型中焦点、鼠标和滚轮事件详解
11-22
6. `mouseenter`：鼠标进入元素时触发，不冒泡且不会因移入子元素而触发。 7. `mouseleave`：鼠标离开元素时触发，不冒泡且不会因移出子元素而触发。 8. `mouseover`：鼠标进入元素或其子元素时触发，会冒泡。 9. `...
js中鼠标事件大全
weixin_46381471的博客
07-13 2024
##js中 鼠标事件大全 click：单击事件。 dblclick：双击事件。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：鼠标移动事件。 mouseover：移入事件。 mouseout：移出事件。 mouseenter：移入事件。 mouseleave：移出事件。 contextmenu：右键事件。 onmousewheel：滚轮事件。 //js中，onmousewheel：滚轮事件兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所
JS-图片其他事件-Event对象-事件委托-DOM对象
weixin_57218747的博客
05-08 358
JS-图片其他事件-Event对象-事件委托-DOM对象 1 回顾 1. 事件回调函数中 this 的指向 2. 鼠标事件 click dblclick contextmenu mouseenter mouseleave mousedown mouseup mousemove 3. 键盘事件 keydown keyup keypress 4. 文档事件 load DOMContentLoaded beforeunload 5. 表单事件
javascript基础——（事件：内联、脚本和DOM2、 鼠标事件、键盘事件、HTML事件、事件冒泡、事件捕获、IE和W3C兼容事件、阻止默认行为、鼠标滚轮、上下文菜单、手机事件）
ranran0306的博客
05-09 545
javascript基础——（事件：内联、脚本和DOM2、 鼠标事件、键盘事件、HTML事件、事件冒泡、事件捕获、IE和W3C兼容事件、阻止默认行为、鼠标滚轮、上下文菜单、手机事件、正则）
判断mouseenter事件鼠标从哪个方向进入
08-10
判断mouseenter事件鼠标从哪个方向进入
获取鼠标坐标 clientX clientY 事件属性
yewuqing007的专栏
07-12 917
定义和用法clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。语法event.clientX提示和注释注释：2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。在 IE 以外的浏览器，使用 window.page
研究MouseEvent中的clientX、offsetX、pageX、screenX
mtgr的博客
01-28 2670
    很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑，有时候clientX、offsetX、pageX用的也不清楚，特此做了一个实验来记录。 1.含义 clientX 提供应用程序客户区域内发生事件的水平坐标（与页面内的坐标相对） offsetX 鼠标指针在该事件与目标节点的填充边缘之间的X坐标中的偏移量 pageX 相对于整个文档的左边缘单击鼠标的X（水...
mousemove鼠标移动
Su__py的博客
11-21 830
鼠标移动事件mousemove div{ width: 200px; height: 200px; background: red; position: absolute; top: 0; left: 0; } // pageX、pageY获取鼠标的坐标 var div=document.querySelector('div');
mouseover,mouseout事件 vue 鼠标移入移出
qq_59175937的博客
02-09 516
mouseover,mouseout事件 vue 鼠标移入移出
JavaScript DOM: 盒子拖动mousedown、mousemove、mouseup、pageX、pageY、offsetLeft、offsetTop
七七的博客
08-02 494
H5\CSS\JS 盒子拖动mousedown、mousemove、mouseup、pageX、pageY、offsetLeft、offsetTop
鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave
热门推荐
qyaroon的博客
04-19 3万+
Mousemove： 当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。 Mousemove 事件是当鼠标指针移动时触发的，即使是一个像素。这意味着多个事件在短时间内被触发。如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。因此，优化mousemove处理程序尽可能，这一点很重要，当不再需要他们时应尽快解除
mouseover鼠标移入，mouseout鼠标移出与mouseenter 鼠标移入，mouseleave 鼠标移出的区别
qq_42943107的博客
08-10 929
mouseover实现鼠标移入的效果 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
html js mouseEvent中clientX和offsetX以及pageX以及screenX区别
情随事迁个人博客
11-03 33
xx 在HTML和JavaScript中，鼠标事件对象(如MouseEvent)提供了几个不同的属性来表示鼠标事件发生时的鼠标位置。这些属性包括clientX、offsetX、pageX和screenX，它们各自表示不同的坐标信息： clientX： 这个属性表示鼠标事件在浏览器窗口内的客户区域的横坐标位置。客户区域是指浏览器窗口中除去滚动条的区域，通常是用户可见的页面区域。 offse...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值