javascript - 如何理解事件mouseenter的不冒泡和mouseover的冒泡
ringa_lee
ringa_lee 2017-04-11 13:16:04
0
1
513

代码如下:

几个嵌套的p,对每个p添加mouseenter监听器。

function fun1(){ console.log(event.currentTarget.id); } d1.addEventListener("click",fun1,false); d2.addEventListener("click",fun1,false); d3.addEventListener("click",fun1,false);

当鼠标移到最里面的d3时,控制台依次输出
d1
d2
d3
意思应该就是,先在外层p触发,再依次在子p触发。

如果从d3(最内层)移到d2,由于已经在一开始触发d2的mouseenter,因此此时也不会触发d2的mouseenter。

而从d1(最外层)移到d2,由于已经在d1内,就只触发d2的mouseenter。

mouseover定义为从元素外部第一次移动到元素边界触发。

把事件监听器改成mouseover后,当鼠标从左侧移到d3,依次输出:
d3
d2
d1
也就是从d3冒泡到d1了。

难道是d3和d2,d1的边界重合了,因此只触发d3的mouseover然后冒泡吗?如果按照mouseenter的理解,它也进入了d2和d1的边界吧。

而从d3移到d2,会依次输出:
d2
d1
也就是从d2冒泡到d1。

上面的操作相当于移出了d3的边界吧,这时候触发了d2的mouseover,这是说在d3的边界也就是d2的边界吗?

ringa_lee
ringa_lee

ringa_lee

reply all (1)
PHPzhong

只能先记着

mouseover会在进入元素或其子元素时触发
mouseenter只在进入元素时触发

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!