与桌面上的Mega导航进行交互时，会触发Mouseleave事件

Question

I have been having an issue where if I hover over blinds and then click between type, room, colour etc, the nav randomly closes itself.

I know why it is closing itself and thats because the .site-navigation element has a mouseleave event bound to it to close the mega nav when the mouse has left the component.

elSiteNav.addEventListener('mouseleave', handleSiteNavMouseEvent);

It is very tricky to replicate but once its replicated the issue happens frequently.

url: https://www.hillarys.co.uk/
browser: chrome

Answer 1

Use stopPropagation in the handleSiteNavMouseEvent function

handleSiteNavMouseEvent(event){
event.stopPropagation();
}