The blocking event bubbling caused by mouseover and mouseout events is invalid

    In the past two days, I encountered a problem when writing a catalog navigation similar to Jingdong. The mouseover and mouseout events were bound to the outer parent box, but I didn't want the child elements in it to trigger, so I used the regular event.stopPropagation( ); and return false to stop bubbling, but neither worked.

    After reading some articles about the relationship between JQ's hover method and mouseenter, mouseleave, mousemove, mouseover, and mouseout, I found that: Unlike the mouseenter event, the mouseover event will be triggered regardless of whether the mouse pointer passes through the selected element or its child elements. . The mouseenter event is fired only when the mouse pointer crosses the selected element.

    Abandon the use of mouseover, mouseout events, and change to hover or mouseenter, mouseleave, this solves my problem, or it is to judge whether it is the target element according to the event triggered each time, if not, the function will not be executed, but it is undoubtedly a bit troublesome. , also has an impact on performance.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325568678&siteId=291194637