Is stopping onmouseover or onmouseenter eventlisteners possible in Wappler natively

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.

Community Page
Last updated: