search

mikke89 / RmlUi

RmlUi - The HTML/CSS User Interface library evolved
https://mikke89.github.io/RmlUiDoc/
MIT License
2.77k stars 304 forks source link

Support for mouseenter and mouseleave events. #619

Open milokhiggins opened 4 months ago

milokhiggins commented 4 months ago

I need to track what the mouse is on top off, but only for a subset of elements. I've found the mouseenter/mouseleave HTML events handle this quite nicely, so it would be nice if Rml had this too.

Also, having had a look into how this library handles events in the past, I was able to implement this into RmlUi 5.1 with just a few lines of code, by duplicating the corresponding mouseover / mouseout events but with bubbling set to false. It's a simple approach but seems to be working fine for me so far.

mikke89 commented 3 months ago

Hey, thanks for the suggestion. Can you elaborate a bit more about your use case. And particularly, how is it that these events work better than mouseover and mouseout in this situation?

Looking at some documentation, it actually looks like our mouseover and mouseout events operate more like web mouseenter/mouseleave, except that we also bubble them, hmm.

milokhiggins commented 3 months ago

Here's a quick demo in HTML https://jsfiddle.net/2tm530fd/ to illustrate my point.

As you move the mouse inside the outer div, a mouseover event is triggered each time you enter a new child of the div. Conversely, the mouseenter event only fires when the mouse enters the outer div, and does not fire while the mouse is moving about inside the outer div.

For my particular use case, I need the mouseenter behaviour because I want to play a sound when the mouse moves over an element. And since this an element with multiple children, if I listen for mouseover events the sound plays multiple times which isn't desired.

mikke89 commented 3 months ago

Right, I see. So I believe what you could do here is to check if target == current_element in the event, and you should effectively get that behavior.

I am tempted though to change things up a bit, so that we follow the behavior of the web DOM events. Effectively rename the current behavior of mouseover and mouseout into mouseenter and mouseleave, just remove their bubbling effect. And add new events taking the the place of mouseover and mouseout, which is only submitted once and bubbles. This would be a change in behavior though, and I am not sure if users rely on that.