V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sunshineHu
V2EX  ›  程序员

jQuery 中的 mouseenter 和 mouseover 的区别?

  •  
  •   sunshineHu · 2016-10-12 21:19:20 +08:00 · 3054 次点击
    这是一个创建于 2946 天前的主题,其中的信息可能已经有所发展或是发生改变。

    什么是穿透???
    首先来说说 mouseenter 和 mouseover 的相同点吧,二者都是鼠标划入事件,当鼠标划入指定的元素时就会触发事件。在所选元素没有子元素等嵌套元素的话,我觉得用 mouseenter 和 mouseover 都一样。
    但是,不同的是:如果所选元素有嵌套的话, mouseover 可能就会被触发多次,而 mouseenter 则只会执行一次。因为只有在鼠标指针穿透该元素时才会触发 mouseenter 事件,而鼠标指针穿过任何子元素,都会触发 mouseover 事件。
    For example :

    <style>
    *{margin:0;padding:0;}
    #outer{width:200px;height:200px;background:red;}
    #inner{width:100px;height:100px;backgroud:blue;}
    </style>
    <script>
    $("#outer").mouseenter(function(){
    console.log(1);//控制台只会显示一次
    })

    $("#outer").mouseover(function(){
    console.log(1);//鼠标移入显示一次,鼠标在子元素划过也会显示。
    })
    </script>
    那么,问题来了,穿透!到底是什么意思???表示不太懂,求大神详解???
    5 条回复    2016-10-13 13:53:57 +08:00
    sunshineHu
        1
    sunshineHu  
    OP
       2016-10-12 21:19:48 +08:00
    <div id="outer">
    <div id="inner"></div>
    </div>
    这是布局,不知道为什么显示不出来
    sunshineHu
        2
    sunshineHu  
    OP
       2016-10-12 21:20:12 +08:00
    大神们帮我看看
    iamzuoxinyu
        3
    iamzuoxinyu  
       2016-10-12 21:48:26 +08:00
    搜一下“ js 冒泡机制”。
    noe132
        4
    noe132  
       2016-10-12 23:01:37 +08:00
    mouseenter 是定制版的 mouseover 。

    子元素的 mouseover 会冒泡到父级元素和祖先元素,通常 情况下我们并不像捕捉到子元素的 mouseover 事件
    所以有了 mouseenter 这个事件。只有触发元素和事件绑定的元素是同一个元素的时候, mouseenter 才会触发。
    https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter
    linyongqianglal
        5
    linyongqianglal  
       2016-10-13 13:53:57 +08:00
    参考事件的冒泡和捕获
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2929 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:58 · PVG 22:58 · LAX 06:58 · JFK 09:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.