javascript - 防止 :hover on touch in iOS

Question

我有一个菜单，当它悬停在上面时需要弹出(当光标移到外面时折叠)。但是，在触摸设备上，我希望它在“点击”时展开和折叠，因为悬停事件不是很有用。

为此，我使用了 :hover 选择器和一个应用于触摸事件的备用 .clicked 类。 touchstart 处理程序切换 .clicked 类并使用 preventDefault 阻止默认操作(设置 :hover 标志)。

它在 Chrome 的移动模拟器中运行良好，但在我的 iPhone 上，菜单最终同时具有 :hover 和 .clicked。为什么会这样？

这是一个 fiddle :http://jsfiddle.net/rgLodhjg/1/

// html
<div class="test">
</div>

// css
.test {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}
.test:hover:before {
    content: "hover";
}
.test.clicked:after {
    content: "clicked";
}

// js
$(".test").on("touchstart", function(e) {
    $(this).toggleClass("clicked");
    e.preventDefault();
    return false;
});

Answer 1

你可以试试这个，它会在 iOS9 上工作(我不确定 iOS8 和更早的版本):

@media (hover: hover) {
  .test:hover:before {
    content: "hover";
  }
}

要支持旧的 iOS 系统，您可以使用 mq4-hover-shim .

您也可以使用@Simon_Weaver 在this post 中提供的解决方案.