android - CSS :focus automatically opens link on android device
<p><p>在一个网站上，我将 <code>:hover</code> 用于 web，<code>:focus</code> 用于链接上的触摸设备。但在 android 设备上，如果我触摸链接，它会执行 <code>:focus</code> 但随后会自动打开链接。</p>
<p>它应该做 <code>:focus</code> 并且如果用户再次点击链接，那么它应该打开链接。纯 CSS 可以做到这一点吗？</p>
<p>我有一个我的 <code>:hover</code> 和 <code>:focus</code> 代码的简短示例:</p>
<pre><code>#menu li:hover ul.sub-menu, #menu li:focus ul.sub-menu{
display:block;
}
</code></pre>
<p>在 iOS 上没有问题(在 iOS 上完美运行)。仅在 Android 设备上。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您将需要一些 javascript(jQuery，已包含在您的站点中)和 <a href="http://modernizr.com/" rel="noreferrer noopener nofollow">Modernizr</a>确定用户是否在触摸屏设备上。还有其他方法可以检查触摸，但在我看来，Modernizr 会为您带来最好的结果。</p>
<p>所以首先包括 Modernizr。您可以从他们的网站下载它或使用像 cdnjs.com 这样的 CDN</p>
<pre><code><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
</code></pre>
<p>之后，将此 javascript 添加到您的网站:</p>
<pre><code>$(document).ready(function(){
if(Modernizr.touch){
$('#menu-mainmenu').on('click', '> li', function(e){
if(!$(this).data('open')){
e.preventDefault();
}
$(this).data('open', true);
});
}
});
</code></pre>
<p>因此，如果您使用触摸设备并单击主菜单项，则会弹出子菜单(由于 <code>:focus</code> 样式)，但由于 <code>e.preventDefault 而链接被阻止()</code>。然后数据值“open”设置为true，所以如果用户再次点击链接，if检查失败，链接正常打开。我无法一直测试它，但它应该可以工作......</p></p>
<p style="font-size: 20px;">关于android - CSS :focus automatically opens link on android device，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/21206971/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/21206971/
</a>
</p>
页:
[1]