mouseover和mouseenter两个事件的区别

又来打个酱油.

mouseover(鼠标覆盖)

mouseenter(鼠标进入)

二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

贴出代码:




    
        
        
        
        
        
    

    
        
            div1没有子元素(mouseenter)        
               
            div2没有子元素(mouseover)        
               
           

div3有子元素p(mouseenter)

       
               
           

div4有子元素p(mouseover)

       
           

先测试一下div1和div2都是没有子元素的情况,看下面动图

mouseover和mouseenter两个事件的区别_第1张图片

  可以看到当div没有子元素的时候,两者在鼠标覆盖或者进入的时候行为一样.

接下来看一下有子元素的div3和div4,如下动图

mouseover和mouseenter两个事件的区别_第2张图片

 

  可以看到在有子元素的div3在mouseenter也不会触发div3

但是div4就会被在它的子元素被覆盖的时候被触发了,也就是产生了冒泡

最后注意:mouseenter就是在想要阻止冒泡事件发生的时候使用

把代码复制复制粘贴下来自己测试一下就明白了,不过注意: jquery需要的包你需要引入,不然是没有效果的.

代码下载链接: 代码链接

 

你可能感兴趣的:(JavaScript,jQuery)