No click but only hover triggered on mobile touch-screen in browser

Question

I have a web-app. There are some elements with the click event bound to them. It works fine on a desktop. But on a tablet when I touch the element it will first not do anything but instead just show that it's hovered with styles. And on the second click it works. How do I disable hover-on-touch and enable clicking on every first touch for the entire app?

Answer 1

These would also trigger on clicking the right mouse button. ---> this is :active state of the element

Maybe this link will help you:

iPad/iPhone hover problem causes the user to double click a link

(sorry, I'm not allowed to add comment yet)