mouseover,mouseenter和mouseout,mouseleave

这里贴原生代码,jquery里面也是这样




  
  
  


BOX2
BOX1
BOX4
BOX3

都以这个图为标准说明


mouseover,mouseenter和mouseout,mouseleave_第1张图片

mouseover和mouseenter
方式 mouseover mouseenter
从外界直接进入box1 触发 触发
从外界直接进入box2 触发 触发
从box1进入box2 触发 不触发
从box2进入box1 触发 不 触发

得出结论 : mouseover冒泡,mouseenter不冒泡


mouseout和mouseleave
方式 mouseout mouseleave
从box1出到外界 触发 触发
从box2出到外界 触发 触发
从box1出到box2 触发 不触发
从box2出到box1 触发 不 触发

得出结论 : mouseout冒泡,mouseleave不冒泡


总结 : 所有的鼠标事件中,只有mouseenter和mouseleave不冒泡,其他鼠标事件都是冒泡的,在使用这几种事件的时候,可以根据自己的需求进行选择

你可能感兴趣的:(mouseover,mouseenter和mouseout,mouseleave)