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?
Asked
Active
Viewed 1,304 times
0
Gherman
- 6,768
- 10
- 48
- 75
-
You can use media query in CSS to restrict hover effect for mobile – Shoaib Konnur Nov 10 '17 at 09:47
-
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Shoaib Konnur Nov 10 '17 at 09:47
-
@ShoaibKonnur I know I can restrict styles from being applied. But styles is just how it looks. If the element has no `:hover` styles applied does it then skip the hover state on touch? I'm talking about onclick function not launching on first touch. Not about the element looking like it's hovered. – Gherman Nov 10 '17 at 09:51
-
What about trying mousedown() or mouseup() instead of click()? – Pons Purushothaman Nov 10 '17 at 09:58
-
@PonsPurushothaman These would also trigger on clicking the right mouse button. This is undesirable. – Gherman Nov 10 '17 at 10:04
1 Answers
-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)
Marii
- 197
- 1
- 9