js鼠标事件

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

介绍

  1. mouseenter 划进
  2. mouseleave 划出
  3. mouseover 划进
  4. mouseout 划出
  5. mousemove 移动

解释

1和3的区别在于3支持冒泡（划进子元素也会执行）
2和4的区别在于4支持冒泡（划出子元素也会执行）
mousemove也会冒泡

如何理解此处冒泡？
当鼠标移上或者移出容器中的子节点时，会分别触发mouseover和mouseout事件，紧随着dom树向上冒泡传递，然后父元素刚好有该事件，所以该事件被执行。

点击这里：能冒泡的事件

小白白中之白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别
weixin_38370966的博客
11-19 3357
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别 mouseout: mouseout是由子元素冒泡而来 鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发，又移入到的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。简而言之，mouseout是只要鼠标指针离开了目标元素或者目标元素的所有子元素中的任何一个就会被触发，即使鼠标指...
关于mouseenter、mouseover、mouseout、mouseleave的理解
weixin_44344236的博客
04-28 389
先说结论：enter、leave是元素区域上的进入和离开，over、out是逻辑上的进入和离开。 enter和leave只在离开元素区域时触发，比如下面这个子元素在父元素的区域中，那么进入、离开子元素是不会触发的，因为子元素在父元素的区域内。而out在离开元素或者子元素时就会触发，over在进入元素或者子元素时触发。 如果下面这种情况，那么要进入子元素就要离开父元素区域，所以会触发enter和leave。 为了证明不是因为div占了一行而对触发效果有影响，将子元素排到父元素下边，结果和上面的那个一样
js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别
JackieDYH的博客
05-25 1万+
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 mouseenter事件的情况 当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触...
如何防止鼠标移出移入子元素触发mouseout和mouseover事件
阵雨的博客
08-11 1万+
我想实现的目标：当鼠标进入黑色框时，橙色框执行淡入动画；当黑色框范围移动的时候（即使经过粉色框，动画仍然不被触发）；当鼠标移出的时候，橙色方块消失。 遇到的问题阐述：当鼠标移入黑色框的时候，橙色框执行淡入动画，但是当鼠标从黑色框经过粉色框的时候，橙色框就消失了，然后又执行一遍淡入动画。当鼠标从粉色框移出到黑色框的时候，橙色框的淡入动画又被执行。这不是我想要的。 初期代码： <!DOC...
解决vue项目中@mousemove 事件 子元素触发了父元素事件
weixin_46073263的博客
07-08 3494
解决vue项目中@mousemove 事件 子元素触发了父元素事件 , 干掉子元素所有事件!
JavaScript常见鼠标事件
最新发布
liGermini526的博客
03-16 4468
对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。
js 鼠标事件的抓取
10-29
### JS鼠标事件抓取知识点详解 #### 一、概述 在Web开发中，鼠标事件是非常常见且重要的交互方式之一。合理地使用鼠标事件能够极大地提升用户体验，并为用户提供更丰富的交互功能。本文将详细介绍如何在JavaScript...
JS鼠标事件大全 推荐收藏
10-28
### JS鼠标事件大全详解 #### 一、概述 JavaScript（简称JS）是互联网上最流行的客户端脚本语言之一，广泛应用于网页开发中实现交互性功能。本文将详细介绍一系列常用的JS鼠标事件及其应用场景，并针对每种事件...
javascript 鼠标事件总结
12-02
常见的有以下8个： mousedown：鼠标的键钮被按下。 mouseup：鼠标的键钮被释放弹起。...因此一个点击事件，通常会激发几个鼠标事件。 请在这里点击，测试一个点击到底捆绑了多少种鼠标事件？！ 清空 [C
javascript 鼠标滚轮事件
10-30
由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
父级元素绑定定mouseout和mouseover，移过子元素是都会触发
weixin_34281537的博客
05-30 2255
2019独角兽企业重金招聘Python工程师标准>>> ...
15.mouseover和mouseenter的区别，父元素设置mouseover，子元素经过会触发
piaoliangj的博客
02-05 474
15.mouseover和mouseenter的区别——软设问题总结15.1 两个事件从中文解释看出本质的差别15.2 具体区别描述 15.1 两个事件从中文解释看出本质的差别 mouseover：鼠标经过事件 mouseenter：鼠标进入事件 15.2 具体区别描述 在使用该事件无子元素下，这两者是毫无差别的； 但在多数情况下，使用该事件的元素都是有子元素的，这就两者产生了区别。 mouseover：进入绑定该事件的元素和其子元素均会触发该事件，所以有一个重复触发，冒泡过程。其对应的离开事件 mouse
js取绝对值的两种方法
热门推荐
m0_53438035的博客
08-18 1万+
1：Math.abs(); 2：a>0?a:-a
块级作用域和函数作用域
m0_53438035的博客
08-03 2165
函数作用域与块级作用域 函数作用域：在函数内部声明的变量只能影响到变量所在函数体本身，无法从外部对函数内部的变量进行调用，被称为‘函数作用域’ 块级作用域：ES6 引入了 let 和 const 关键字，JavaScript 也有了块级作用域。当代码块中存在 let 或 const，这个代码块就成为了块级作用域。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。(即定义变量和使用变量只能在同一个{}里) var,let,const的区别 var var没有块
property和attribute，以及获取设置属性
m0_53438035的博客
07-28 539
在这里插个眼，说实话，没太明白 区别和相同 一般的内联属性为property和attribute共有，但自定义属性（内联样式中）为attribute所有。 attribute中的class在property中叫做className（在取值和赋值时注意） 取值和赋值（设值）的区别： 3.1.attribute的取值和赋值:getAttribute(‘属性名’,‘属性值’)，setAttribute(‘属性名’,‘属性值’) 3.2.property的取值和赋值分别为:变量=对象.属性;对象.属性=属性值（不
js之无法选中文字和禁止右键菜单小案例
m0_53438035的博客
05-04 521
代码： <body> <p>这是一段无法右键复制的文字</p> <p>这是一段无法选中的文字</p> <script> /* 禁止鼠标右键菜单 */ var p=document.querySelectorAll('p') p[0].addEventListener('contextmenu',(e)=>{ e.preventDefau
scrollingElement和documentElement
m0_53438035的博客
08-19 468
区别与相同 scrollingElement在MDN上的解释： 界面的scrollingElement只读属性 Document返回对Element滚动文档的引用。在标准模式下，这是文档的根元素 document.documentElement. 在 quirks 模式下，该scrollingElement属性返回 HTML body元素（如果它存在并且是潜在可滚动，否则返回 null。 documentElement在MDN上的解释： Document.documentElement 是一个会返回文
js中各种宽和高
m0_53438035的博客
08-19 319
屏幕尺寸（screen） window.screen.heiht和window.screen.availHeight window.screen.width=window.screen.availWidth 浏览器尺寸（inner和outer） window.innerHeight和window.outerHeight window.innerWidth和window.outerWidth window.innerWidth会受开发者工具影响 截至上述所有均包含滚动条 页面尺寸（client和off
js onmouseover鼠标事件
04-11
Q: "b'js onmouseover\xe9\xbc\xa0\xe6\xa0\x87\xe4\xba\x8b\xe4\xbb\xb6'" 的意思是什么？ A: 这个字符串表示的是 ...其中的\xe9\xbc\xa0\xe6\xa0\x87\xe4\xba\x8b\xe4\xbb\xb6是对应的中文“鼠标事件”的编码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值