如何在非iOS触摸设备上模拟iOS的悬停/点击/可见性行为？

Question

iOS有一个众所周知的问题，iOS会对其进行巧妙的优化以处理CSS：hover效果。 基本上，它将ontouchstart的“单击”事件分为两部分：第一次单击是“悬停”，并触发动画，css效果等。然后，如果再次单击相同的链接，则该事件实际上会通过。

例如：

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

此处的大多数问题似乎是由希望让iPhone像Android一样表现的人跳过了一按两下。

我要相反。 我当前的想法是检测用户是否在触摸设备上，如果是，请添加/删除/检查classList系统，以了解该元素是否已连续两次单击。

不幸的是，我的Android设备在触发“ ontouchstart”事件之前触发了“ onclick”事件，并且出于某些奇怪的原因，它也触发了“ onmouseenter”事件。

Answer 1

到目前为止，这是我想出的

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();
                }
            }
        }
    }
}

希望有比这更好的解决方案。