js mouseenter和mouseover的区别

最新推荐文章于 2024-03-16 11:36:04 发布
最新推荐文章于 2024-03-16 11:36:04 发布
阅读量1.6k 收藏
点赞数

单独一个元素没有区别，但是有了子元素会有区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .over{
            background-color: #66d3ff;
            width:500px;
            float:left;
            padding: 10px 10px;
        }
        .enter{
            background-color: #66d3ff;
            width:500px;
            float:left;
            margin-left:30px;
            padding: 10px 10px;
        }
        h2{
            background-color: #fff;
            padding: 5px 5px;
        }
    </style>
</head>
<body>
<p>mouseover 事件:不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>mouseenter 事件:只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over">
    <h2>被触发的 Mouseover 事件次数：<span></span></h2>
</div>
<div class="enter">
    <h2>被触发的 Mouseenter 事件次数<span></span></h2>
</div>
<script>
    var x = 0,y = 0;
    var div1 = document.getElementsByClassName("over")[0];
    div1.addEventListener("mouseover",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (x +=1);
    },false);

    var div2 = document.getElementsByClassName("enter")[0];
    div2.addEventListener("mouseenter",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (y +=1);
    },false);
</script>
</body>
</html>
qaqLjj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript中mouseenter与mouseover的异同
10-19
javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter：鼠标移入监听对象时触发...
mouseenter和mouseover的区别
qq_66442729的博客
11-21 474
这意味着如果有多个元素嵌套在一起并且绑定了mouseenter和mouseover事件，那么当鼠标从子元素移动到父元素时，只会触发一次mouseenter事件，并不会冒泡到父元素。而mouseover事件会在每个元素上都触发。mouseenter只考虑鼠标是否进入了元素自身，而不考虑鼠标是否进入了元素的子元素。而mouseover则会为鼠标指针进入和离开元素及其子元素触发事件。mouseenter只有在鼠标进入元素时触发，而mouseover在鼠标进入或者在元素内移动时都会触发。
mouseover 和 mouseenter 的区别
ModStartCMS的博客
01-10 1381
举个例子，如果你有一个 div 元素，其中包含一个 p 元素，并且为这两个元素都添加了 mouseover 和 mouseenter 事件监听器，当鼠标指针移动到 p 元素上方时，mouseover 事件会在 div 和 p 元素上同时触发，而 mouseenter 事件只会在 div 元素上触发。还有一点需要注意的是，mouseover 和 mouseenter 事件有一个重要的区别，就是当鼠标指针从子元素移动到父元素时，mouseover 事件会在父元素上再次触发，而 mouseenter 事件不会。
JavaScript常见鼠标事件
最新发布
liGermini526的博客
03-16 1292
对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。
mouseenter和mouseleave与mouseover和mouseout的区别
热门推荐
xm_w_xm的博客
04-19 2万+
一、mouseenter（指针穿过，子集不执行） 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。 注意：与mouseover事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时...
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
u014105739的博客
10-14 6734
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
鼠标事件(mouseover和mouseenter)
qq_62042780的博客
05-27 3728
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 下拉菜单案例前言一、mouseover和mouseenter的不同点1.事件的触发时机2.是否支持冒泡二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 自己做下拉菜单的时候，突然发现mouseover和mouseenter事件都可以，但是一查之后发现他们两个还是有区别的。所以写了这篇文章记录一下，希望对大家有帮助。 mouseover和mouseenter都是鼠标移到元素身上就触发，区别是： 1.m.
javascript中mouseover、mouseout使用详解
12-10
在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout。 网上很多说法，这两个事件只有ie支持，其他浏览器不支持。 但是我在最新版本的火狐与谷歌都支持了mouseenter 与 mouseleave！！！！！ 另外ie是...
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
12-04
写了这么久 js应用 我居然不知道这两个事件 于是 去google搜索了一番....对于 mouseover 和mouseenter 两个事件 最大的区别就是 mouseenter 是 不冒泡的事件 ..这话怎么理解呢? <div xss=removed><div id=”c
JavaScript和JQuery的鼠标mouse事件冒泡处理
12-10
mouseenter：不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件 移出 代码如下: mouseleave: 不冒泡 mouseout：冒泡...
JavaScript---常用的鼠标事件mouseover 和mouseenter的区别
COCOLI_BK的博客
01-04 2056
当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。2、mouseenter和mouseleave 事件不会冒泡，依旧是说鼠标移入、移出时，该元素的子元素或父元素不会触发该事件。1、mouseover和mouseout会有事件冒泡，也就是说鼠标移入、移出当前元素的子元素或父元素时都会触发该事件。：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。false：冒泡阶段。
JS——mouseover和mouseenter的区别
weixin_52148548的博客
02-15 1866
区别举例补充 区别 mouseover:鼠标移入事件所绑定的元素或其子元素时，都会触发该事件。（具有冒泡特性） mouseenter:只有鼠标移入事件所绑定的元素时，才会触发该事件。（不具有冒泡特性） 举例 mouseover： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content.
mouseover 和 mouseenter的区别
往前爬的蜗牛
04-05 7074
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave mouseover和mouseenter的异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 运行下面的代码，我们可以直观的发现两者的区别： <!DOCTYPE html> <html lang="en"> &
mouseover和mouseenter的区别？
weixin_47450807的博客
03-09 7001
一、写在前面 mouseover和mouseenter之间是存在区别的，但是平时在使用的时候并不知道他们的区别，所以一直都处于混用的状态，下面这篇博客主要来详细叙述一下这两者的区别。 二、不同点 mouseover和mouseenter最本质的区别是：mouseover支持事件冒泡，mouseenter不支持事件冒泡。 ①、触发A的mouseover和mouseenter事件 ②、触发A的mouseout和mouseover事件，触发B的mouseover和mouseenter事件 ③、触发A的mouse
JS中的鼠标事件
m0_70185826的博客
07-01 9880
通过鼠标触发事件，类似用户的行为：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。 MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键 2. MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏
鼠标的移入、移出事件
06-15 1万+
① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发mouseover（或mouseout）事件② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发mouseenter（或mouseleave）事件。
JavaScript 常见鼠标事件
weixin_58838794的博客
04-10 2377
4、mousemove (move移动)鼠标在固定的位置一移动就触发移动，就触发。2、mousedown 鼠标按下时触发。5、mouseenter 鼠标移入触发。6、mouseleave 鼠标移出触发。3、mouseup 鼠标弹起时触发。1、click鼠标左键点击。
JavaScript 鼠标事件监听&&触发时机&&触发顺序
jinse29的博客
04-25 6938
先说下触发时机和作用键（左键、右键）
mouseover和mouseenter的区别
Sugarman0620的博客
09-18 323
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave mouseover和mouseenter的异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 先看一张图，对这两件事有一...
mouseenter和mouseover区别
03-17
`mouseenter` 和 `mouseover` 是两种 JavaScript 中的鼠标事件。 `mouseover` 事件在鼠标进入元素或其子元素时触发，而 `mouseenter` 事件只在鼠标进入元素时触发，不会在进入子元素时触发。 所以如果你想让一个事件只在鼠标进入元素时触发而不是进入子元素时触发，应该使用 `mouseenter` 事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值