Why `mouseenter` delegate event handler is not firing? (but works with jquery)

[m-ahmadi]

Hi, Why this isn't working? If I switch to jquery it will work though.

In case the pen has issues:

```html

• a
• b
• c

`

[fabiospampinato]

It looks like a bug 🤔

[krschroeder]

same issue, 'mouseenter' not working 😢

[benjaminforras]

@fabiospampinato @m-ahmadi It's working:

• Mouseenter: https://jsfiddle.net/hp8ezfg0/
• Mouseover: https://jsfiddle.net/drsq4jLg/

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

[m-ahmadi]

Somehow it's not working in CodePen, but it works when I copy it into a test.html file.

test.html

```html

• a
• b
• c

```

@TryHardDood At first I thought your version works because it's using v7.0.3 but it even works with v7.0.1 which was used in the first post of this issue, so I guess something must be wrong with CodePen.

[benjaminforras]

@m-ahmadi I tried it on codepen and my versions are working.

Mouseenter: https://codepen.io/TryHardDood/pen/qBbORda Mouseover: https://codepen.io/TryHardDood/pen/jOWbyPd

This will not work for some reason (it's not working on jsfiddle too):

$('ul').on('mouseenter','li', function () {
  alert('fired');
})

Probably because you need to use mouseover instead of mouseenter

[m-ahmadi]

This will not work for some reason (it's not working on jsfiddle too):

@TryHardDood Well then the issue is still there.

Because when you do $('ul li').on('mouseenter', ...), that's not a delegated event (you're adding a listener to every <li>) and there was no problem or issue with that in the first place.

The issue is when you do $('ul').on('mouseenter', 'li', ...), so that you only add one listener to the <ul> and not on mouseever (which works fine) but on mouseenter.

The reason I made this issue is that this works in jquery so using mouseover instead might be a quick fix, but I don't think that's the answer here.

[benjaminforras]

@m-ahmadi Yeah you're right.

mouseover can be a quick workaround in this case however the problem exists with mouseleave too.

After a quick search I found this in jquery's source code, it seems like jquery use the mouseover/out events to make delegation work: https://github.com/jquery/jquery/blob/3d62d5704989f17d3a20ae7521d52e9c8c60b4ee/src/event.js#L777

[fabiospampinato]

Fixed in v8! What an absolute mess of a bug, imagine my face when saw this: https://github.com/fabiospampinato/cash/commit/a66b43ed058edf31fcc4dfcc1f0fdf7a15dfb47a#diff-07b7d1177cdf432e3402964df5c32d69L111