Dispatched click event: Prevent browser to jump to clicked element

I have a quite complex product in WooCommerce with a complicated variation selector.

To simplify things you can just click on a photo of a variation you like (anywhere on the page) and have it selected for you.

So I just added an eventlistener on the photos that triggers a click on the correct variation checkbox, as soon as you click the image:

Photo_Variation1.addEventListener('click', () => {      Variation1.click()  })  

This works fine, but then the browser automatically jumps to the original variation selector – because it gets focused after/during the click-event. This is rather confusing UX-wise.

So I tried for hours to find a solution. But so far my only lousy success was making it work in Safari, by adding this to the eventListener:

Variation1.blur()  

I found out it doesn't work in other browsers, because there the focus event happens directly after the mousedown-event. (In Safari it's after the click.)

However, when I tried to solely trigger the mousedown function (with a "preventDefault") nothing gets selected, at all.

Do you have an idea how I can trigger a click and prevent focusing the clicked element or any another workaround that stops the browser from jumping around?

Thank you so much in advance!

PS: I am using JavaScript for just 8 hours, so have mercy, please. :D

https://stackoverflow.com/questions/65386345/dispatched-click-event-prevent-browser-to-jump-to-clicked-element December 21, 2020 at 09:03AM