document.querySelectorAll doesn't seem to work

[Dan503]

I have this code

var _hoverTriggers = document.querySelectorAll('.JS-navigator__trigger--hover');

hoverintent(_hoverTriggers,
    function() {
        console.log('in');
    }, function() {
        console.log('out');
    }
);

And I am receiving this error:

Uncaught TypeError: e.addEventListener is not a function

The most common use for this plugin is triggering mega menus on navigation items. It doesn't make sense not supporting query selector all in this context.

[tristen]

querySelectorAll returns a NodeList which isn't a type handled internally. You would need to iterate through the list and apply hoverintent to each element respectively. i.e

var _hoverTriggers = document.querySelectorAll('.JS-navigator__trigger--hover');

Array.prototype.forEach.call(_hoverTriggers, function(el) {
  hoverintent(el, hoverInFunc, hoverOutFunc);
});

[tristen]

It might be a good idea to support NodeList though so I'll leave it open!

[Dan503]

Yuk! XP

This issue drove me back to the jQuery version of the plugin. You need to support node list if you want to be able to compete with it.

[lobenichou]

1+ On this. Would def make a difference 👍

[danielpost]

For what it's worth, it's not that hard to make hoverIntent work with querySelectorAll:

const toggles = document.querySelectorAll('[data-dropdown-open]');

if (!toggles) return;

for (const toggle of toggles) {
  hoverIntent(
    toggle,
    () => {
      toggle.setAttribute('data-dropdown-open', 'true');
    },
    () => {
      toggle.setAttribute('data-dropdown-open', 'false');
    }
  );
}