Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for mouseenter and mouseleave events. #619

Open
milokhiggins opened this issue Jun 3, 2024 · 3 comments
Open

Support for mouseenter and mouseleave events. #619

milokhiggins opened this issue Jun 3, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@milokhiggins
Copy link

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 mikke89 added the enhancement New feature or request label Jun 3, 2024
@mikke89
Copy link
Owner

mikke89 commented Jun 3, 2024

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
Copy link
Author

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
Copy link
Owner

mikke89 commented Jun 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants