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.
Last updated: