jQuery 移动 safari 链接在触摸后保持焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10642953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mobile safari links retains focus after touch
提问by d2burke
My navigation is quite simple. I have a hover state which adds a border and a transparent gradient png background to some text, and an additional class which, when added by jQuery, adds color behind that transparent image.
我的导航很简单。我有一个悬停状态，它为某些文本添加边框和透明渐变 png 背景，还有一个附加类，当由 jQuery 添加时，在该透明图像后面添加颜色。
If you click to toggle the class in a web browser you'll see the color come in and out, but the background image stays if you never move the mouse away from the button. This is expected behavior.
如果您在 Web 浏览器中单击以切换类，您将看到颜色进出，但如果您从未将鼠标从按钮上移开，背景图像将保持不变。这是预期的行为。
My problem is that when using an iPad, the touch seems to retain the hover state and the :hover properties never go away unless you click another button, in which case the persistent :hover properties are added to that button until another is pressed.
我的问题是，当使用 iPad 时，触摸似乎保持悬停状态，除非您单击另一个按钮，否则 :hover 属性永远不会消失，在这种情况下，持久性 :hover 属性会添加到该按钮，直到按下另一个按钮。
I can't imagine that I am the first with this problem, but searches haven't turned anything up.
我无法想象我是第一个遇到这个问题的人，但搜索没有发现任何问题。
Help?
帮助？
Normal - Hover - Active (via addClass() )
正常 - 悬停 - 活动（通过 addClass() ）
采纳答案by charlitosJS
Hover is a CSS pseudo class designed to work with a pointer not so much with touch events. You would normally want to avoid the use of hover altogether since it makes no sense on mobile. One of the easiest ways to deal with this is by placing your hover CSS inside a media query. You can do this by targeting tablets or desktop screens, here are the two solutions:
Hover 是一个 CSS 伪类，旨在处理指针而不是触摸事件。您通常希望完全避免使用悬停，因为它在移动设备上毫无意义。解决此问题的最简单方法之一是将您的悬停 CSS 置于媒体查询中。您可以通过定位平板电脑或桌面屏幕来实现这一点，以下是两种解决方案：
1- Targeting iPads:
1- 针对 iPad：
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
RE.no-touch .my-element:hover {
/* in here you cancel all hover styles you applied for desktop */
}
}
2- Targeting desktops:
2- 定位桌面：
@media only screen
and (min-width : 1224px) {
RE.no-touch .my-element:hover {
/* in here you apply hover styles that will only work on desktop */
}
}
Either way is valid. You can change the values of min and max width if you notice that the CSS is being triggered incorrectly in certain devices.
无论哪种方式都是有效的。如果您注意到 CSS 在某些设备中被错误触发，您可以更改最小和最大宽度的值。
回答by Redtopia
If you're using Modernizr, the no-touch class will be added to the root html element for non-touch devices. Then you can do this:
如果您使用的是 Modernizr，则 no-touch 类将被添加到非触摸设备的根 html 元素中。然后你可以这样做：
a.myclass {
color:#999;
}
.no-touch a.myclass:hover,
a.myclass:active {
color:#ccc;
}
回答by Kenny Hank
This is an old post but I was struggling with this today in 2019, and I find this clean solution and I want to share with all of you.
这是一篇旧帖子，但我在 2019 年的今天遇到了这个问题，我找到了这个干净的解决方案，我想与大家分享。
<a href="#">Try hovering over me!</a>
@media (any-hover: hover) {
a:hover {
background: yellow;
}
}
Basically what are we doing here is using hover in any device with pointer mechanism. Nowadays there is softwares with html readers for a better accessibility of the site and should not be a good idea, deactivate :hover for all mobile devices. Just to be clear, any device without pointing mechanism the hover will not take effect, otherwise we applied the :hover style.
基本上我们在这里所做的是在任何具有指针机制的设备中使用悬停。现在有一些带有 html 阅读器的软件可以更好地访问网站，这不应该是一个好主意，请禁用所有移动设备的 :hover。需要明确的是，任何没有指向机制的设备悬停都不会生效，否则我们将应用 :hover 样式。
回答by Zymotik
This is how I fixed it for my list with a hover:
这就是我通过悬停为我的列表修复它的方法：
CSS:
CSS：
ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}
jQuery:
jQuery：
$(document).ready(function () {
$('li').on('touchstart', function () { $(this).css('background-color', ''); });
$('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});
And a fix for hover on back buton navigation...
并修复了悬停在返回按钮导航上的问题...
<body onunload="$('a').blur();">
or
或者
$(window).unload( function () { $('a').blur(); } );
For the unini-ti-ated, the unload event occurs right before the browser leaves the page. By blur-ring all of the links in the page on unload, I was able to un-stick the hover state. Returning to the orig-inal page using the back button shows the clicked link in the default state.
对于 unini-ti-ated，卸载事件发生在浏览器离开页面之前。通过在卸载时模糊页面中的所有链接，我能够取消悬停状态。使用后退按钮返回原始页面显示默认状态下的单击链接。
Unfortunately, an onclick event doesn't seem to trigger the unload, but a refresh does in iOS 5?!
不幸的是，onclick 事件似乎不会触发卸载，但在 iOS 5 中会触发刷新？！
Stuck On :hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/Use jQuery to replace - http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/
卡住：悬停 - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/使用 jQuery 替换 - http://www.nerdboy.co.uk/2009/01/使用 jquery-to-replace-body-onunload/
回答by BradGreens
I ran across this issue as well. My problem was on the iPad, if I tapped an anchor and scrolled slightly, a click event did not fire but the element would retain the hover state CSS. My belief is that the iPad was actually retaining a focus state and applying the :hover CSS styles in an effort to simulate the desktop experience.
我也遇到了这个问题。我的问题是在 iPad 上，如果我点击一个锚点并稍微滚动，点击事件不会触发，但元素会保留悬停状态 CSS。我的信念是 iPad 实际上保持了焦点状态并应用了 :hover CSS 样式来模拟桌面体验。
A non-JS and practical workaround is to not deliver hover styles to touch devices if there is not a need for them. Touch devices do not have a "real" hover state, however it appears hover is simulated when an element is focused or tapped-and-scrolled upon.
一个非 JS 且实用的解决方法是，如果不需要它们，则不向触摸设备提供悬停样式。触摸设备没有“真正的”悬停状态，但是当元素被聚焦或点击并滚动时，它似乎模拟了悬停。
So with Modernizr.jsloaded, I moved my hover styles into the scope of .no-touch -
因此，加载Modernizr.js 后，我将悬停样式移至 .no-touch 范围内 -
i.e.
IE
/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
/* hover styles */
}
Then, when the element is clicked I am toggling an active class on it.
然后，当单击该元素时，我在其上切换一个活动类。
.my-element.active {
/* active styles */
}
The only negative takeaway is you do not get a "being tapped state". I have yet to investigate a solution for that as it's not really important for my apps.
唯一的负面影响是您不会获得“被窃听状态”。我还没有为此研究解决方案，因为它对我的应用程序并不重要。
回答by Huangism
you need to catch the following events
你需要捕捉以下事件
touchstart - when your finger touches the screen
touchstart - 当您的手指触摸屏幕时
touchend - when your finger leaves the screen
touchend - 当您的手指离开屏幕时
think of as hover and unhover, if you can post some code we can help you more if you don't understand what I am saying
认为是悬停和取消悬停，如果您可以发布一些代码，如果您不明白我在说什么，我们可以为您提供更多帮助
$('element').on('touchstart', function(){
// apply hover styles, or better yet addClass() of hover styles
});
$('element').on('touchend', function(){
// removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});
Give some sample code, the touchstart and end should solve the problem
给出一些示例代码，touchstart和end应该可以解决问题
回答by juanjinario
If you are using SCSS, I recommend you do the following:
如果您使用 SCSS，我建议您执行以下操作：
// primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
background: red;
color: white;
}
.primary-button:hover {
background: green; // Only for big screens
@media(max-width: 768px) {
background: red;
}
}
If you reset the value of the background to the initial value, you will no longer have problems with the button being pressed on devices <= 768px resolution
如果您将背景值重置为初始值，则在设备 <= 768px 分辨率上按下按钮将不再出现问题
回答by debain
This is a workaround:
这是一种解决方法：
var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);
