Is stopping onmouseover or onmouseenter eventlisteners possible in Wappler natively

Wappler General
1

I have a list of products that all show more information for each when a user hovers over the product they are interested in, it looks a bit like this.

PRODUCTS
BMW 3 series
Audi A4 2.8
Honda CR-V
Ford EcoSport

So when a user hovers over BMW 3 Series then it sends the ID to a database query and retrieves the data for that product and displays it in a nice card to the right with an image and some details on the product, and most importantly a READ MORE link that the user can click to see the full details of their selection.

The issue I am facing is that sometimes if the user is not super accurate with their mouse moving, when they try get to the card on the right to click MORE INFO they may for a split second touch one of the other products, and then the BMW goes away and they may be looking at the Audi instead.

I added a debounce to the onmouseenter, which works perfectly, causing a delay in showing the users mistake.
So my question is, is there a way to stop the onmouseover or onmouseenter event listeners from firing when this happens, similar to debounce, but so the product ID never even updates if the user just touched the other product for a split second while moving their mouse over?

My code looks like this

<a class="dropdown-item" href="javascript:void(0);" dmx-repeat:repeat1="sc_retrieve_products.data.query_distinct_products_filtered" dmx-on:mouseenter.debounce:2000="sc_retrieve_products.load({what_product: product_id})">{{cpc_product_name}}</a>

Hoping there is a simple solution like dmx-on:mouseenter.debounce:2000.nolisten:2000="serverconnect1.load({what_product: product_id})", but I somehow doubt it, haha.

2

Not on my computer currently and can’t remember if it’s possible there, but maybe you can use modifier > once to trigger this only once?

1 Like
3

I think that a click event will solve the problem, especially because touch screens do not have mouse-over events.

4

You are quite right @ben, I am beginning to contemplate the exact same thing on my side, if the hover is actually worth its trouble, I may have a chat with the client and explain it to them and switch to onclick rather.

I tied the once modifier but it did not work, although I have never used modifiers so not certain i did it right either, haha.

5

I tested all the modifiers Teo, sadly none of them give the result I need, just figured I would update the thread so other know too.

6

So what's the once modifier doing then?

EDIT: Nevermind, reading your post again I think once won't be working for your case.

1 Like