How can I simulate the hover/onclick/visibility behavior of iOS on non-iOS touch devices?

Question

There's a well known issue whereby iOS does a clever optimization to handle CSS :hover effects. Basically, it splits the ontouchstart "click" event into two: the first click is the "hover", and triggers animations, css effects, etc. Then, if the same link is clicked again, the event actually goes through.

eg:

<style>dd { height: 0 } dt:hover + dd { height: unset }</style>
<dt><a href="#">Magic</a></dt>
<dd>Magic is cool</dd>

Most of the questions on here seem to be by people who want iPhone to behave like Android, skipping the one-two tap.

I want the opposite. My current idea is to detect that the user is on a touch device, and if so, have a system of classList add/remove/check to know whether the element has been clicked twice in a row.

Unfortunately, my android device fires off "onclick" events before firing "ontouchstart" events, and for some bizarre reason it also fires "onmouseenter" events.

Answer 1

This is what I have come up with so far

function enableLinkIfHoverOnly() {
    let anchors = document.querySelectorAll("dt > a");
    for(let i=0; i<anchors.length; i++) {
        let anchor = <HTMLAnchorElement>anchors[i];
        // disable iPhone correct behavior by adding dummy ontouchstart event
        anchor.ontouchstart = (e) => true;
        // simulate iPhone correct behavior with a class check
        anchor.onclick = (e) => {
            if('ontouchstart' in window) {
                let hovered = document.querySelector(".hovered");
                if(hovered !== anchor) {
                    if(hovered) hovered.classList.remove("hovered");
                    anchor.classList.add("hovered");
                    e.preventDefault();
                }
            }
        }
    }
}

Hoping that there is a better solution than this.