Dawn Theme: Where is the 'click' event listener for the header menu dropdowns?

[rumleydev]

I'm trying to change the menus from opening on 'click' to on 'mouseenter'. It appears that around line 247 in global.js there is a function that adds the event listener to <summary> tags that add an 'open' attribute to the <details> tag wrapping them. See below:

bindEvents() {
    this.querySelectorAll('summary').forEach(summary => summary.addEventListener('click', this.onSummaryClick.bind(this)));
    this.querySelectorAll('button').forEach(button => button.addEventListener('click', this.onCloseButtonClick.bind(this)));
  }

However, then I changed the 'click' listener on summary to 'mouseenter' I'm not seeing a change. So I'm not sure I'm looking at the right thing or for something else. 

Any ideas?

[rumleydev]

Bump

[diego_ezfy · Accepted solution]

@rumleydev 

I believe it would be easier (and arguably more well organized) to create additional functions for customizations. This way you can always scroll down to the bottom of the javascript file and find all the customizations that theme has.

Also, in this particular case, I do not think that redundancy will have any negative impacts in performance.

Personally this is how I'd achieve this:

function handleHeaderDropdownHover(){
var $dropdowns = document.querySelectorAll(`.header .list-menu li > * > details`);

if (!$dropdowns){
return;
}
for (var $dropdown of $dropdowns){
$dropdown.addEventListener('mouseenter', function(e){
const $this = e.target;
const  $button = $this.querySelector(`.header__menu-item`);

$button.click();
});

$dropdown.addEventListener('mouseleave', function(e){
const $this = e.target;
$this.removeAttribute('open');
});
}

}

handleHeaderDropdownHover();

Kind regards,
Diego

[rumleydev]

This helped a lot, thanks!

[Bazza1]

I am also looking to implement this but I'm a bit confused where to even begin. I have tried to establish where the 'click' event is generating but have not been successful. Even with the 'solved' script I cannot find where to link this.

Can anyone help and give me an idiots guide to solve this?

[rumleydev]

The bottom of global.js is where I put it and it worked.

[Tarasbugaienko]

Hello! when I'm adding this code it works but only on the main page. at other pages when i leave dropdown button menu is also collapse so I can't set mouse on need submenu