Javascript iOS自动悬停修复？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5507964/
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
iOS automatic hover fix?
提问by DADU
Is there a jQuery plugin or JavaScript script that automagically loops through each CSS hover (found in an external stylesheet) and binds it with a double touchdown event?
是否有 jQuery 插件或 JavaScript 脚本自动循环遍历每个 CSS 悬停（在外部样式表中找到）并将其与双触地事件绑定？
- Touchdown 1 - CSS :hover is triggered
- Touchdown 2 - Click (link following or form action)
- 触地得分 1 - CSS :hover 被触发
- 触地得分 2 - 单击（链接跟随或表单操作）
If there isn't something like this yet, can it be made and how (guidelines)?
如果还没有这样的东西，是否可以制作以及如何制作（指南）？
EDIT:
编辑：
To be clear, I am not in search of a double tap. Touchdown 1 is a single tab just like Touchdown 2 is. There can be as less as 0 seconds between both or as much as 3 minutes, that's the user's choice.
需要明确的是，我不是在寻找双击。Touchdown 1 和 Touchdown 2 一样是单个选项卡。两者之间可以少至 0 秒，也可以多至 3 分钟，这是用户的选择。
No touch:
不许触碰：
- :hover -> element becomes visible
- click -> following link or other action
- :hover -> 元素变得可见
- 单击 -> 以下链接或其他操作
Touch (iOS):
触摸（iOS）：
- touchdown 1 -> element becomes visible
- touchdown 2 -> following link or other action
- 触地得分 1 -> 元素变得可见
- 触地得分 2 -> 以下链接或其他操作
采纳答案by Richard JP Le Guen
Try this:
尝试这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>iPad Experiment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(navigator.platform == "iPad") {
$("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
var onClick; // this will be a function
var firstClick = function() {
onClick = secondClick;
return false;
};
var secondClick = function() {
onClick = firstClick;
return true;
};
onClick = firstClick;
$(this).click(function() {
return onClick();
});
});
}
});
</script>
<style type="text/css">
a:hover {
color:white;
background:#FF00FF;
}
</style>
<body>
<a href="http://google.ca">Google</a>
<a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>
... or check out the demo on my web site. Note that it's set up to only work its magic on the iPad - detecting all versions of the iOS is another question in my books ;)
...或在我的网站上查看演示。请注意，它设置为仅在 iPad 上发挥其魔力——检测所有版本的 iOS 是我书中的另一个问题；)
It works on the basis of the fact that...
它的工作原理是...
After you click a link on the iphone or ipad, it leaves a simulated mouse hover that triggers the a:hover css styling on that link. If the link has a javascript handler that keeps you on same page, the hover state will not change until you click on another link.
在您单击 iphone 或 ipad 上的链接后，它会留下一个模拟鼠标悬停，触发该链接上的 a:hover css 样式。如果链接有一个 javascript 处理程序让您保持在同一页面上，则在您单击另一个链接之前，悬停状态不会改变。
Citation: Safari iphone/ipad “mouse hover” on new link after prior one is replaced with javascript
回答by Rich Bradshaw
I've used this:
我用过这个：
$(document).ready(function() {
$('.hover').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
Before, to allow hover on certain elements. Obviously you'll need to tweak it for your own use, but it's a nice way to allow a touch and hold hover effect.
之前，允许悬停在某些元素上。显然，您需要对其进行调整以供自己使用，但这是一种允许触摸并保持悬停效果的好方法。
回答by Steven Vachon
Here is a further optimized version that also handles closingthe :hover
这是一个进一步优化的版本，它也处理关闭:hover
You'll have to encapsulate your site with a
你必须用一个封装你的网站
<div id="container"></div>
for it to work. Just putting the closing event on the body did nothing
让它工作。只是把关闭事件放在身体上什么也没做
var bodyBound = false;
var container;
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i))
{
container = $("#container");
// Provoke iOS :hover event
$("a.someLink").on("mouseover", handleHoverClick);
}
function handleClose(event)
{
container.off("click", handleClose);
bodyBound = false;
}
function handleHoverClick(event)
{
if (!bodyBound)
{
bodyBound = true;
// Somehow, just calling this function—even if empty—closes the :hover
container.on("click", handleClose);
}
}
回答by Julian F. Weinert
I created this update apon Richard JP Le Guens solution. It works GREAT, but my version fixes the issue recognized by DADU.
我根据 Richard JP Le Guens 解决方案创建了此更新。它工作得很好，但我的版本修复了 DADU 识别的问题。
Also I fixed his workaround to detect iPads. My solution detects any other touch devices too (except IE10 on MS surface, I didn't remember the MS special treatment).
我还修复了他的解决方法来检测 iPad。我的解决方案也检测到任何其他触摸设备（MS 表面上的 IE10 除外，我不记得 MS 的特殊处理）。
My fix is not a 100% perfect solution, but it resets the hover fix at least when hovering another link.
我的修复不是 100% 完美的解决方案，但它至少在悬停另一个链接时重置悬停修复。
<!DOCTYPE html>
<html>
<head>
<title>TouchDevice Experiment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(document.createEvent("TouchEvent")) { // using document.createEvent is more reliable than navigator (Modernizr uses this practice)
$("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
var onClick; // this will be a function
var firstClick = function() {
$("a").trigger("JWUnhover"); // triggering hoverfix reset if any link gets touched
onClick = secondClick;
return false;
};
secondClick = function() {
onClick = firstClick;
return true;
};
onClick = firstClick;
$(this).click(function() {
return onClick();
});
$(this).bind('JWUnhover', function(){ onClick = firstClick; });
});
}
});
</script>
<style type="text/css">
a:hover {
color:white;
background:#FF00FF;
}
</style>
</head>
<body>
<a href="http://google.ca">Google</a>
<a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>
回答by crivers
This worked for me!
这对我有用！
// Ipad Navigation Hover Support
$('#header .nav li a').bind('touchstart touchend', function(e) {
if( $(this).attr("href") != "" ){
window.location = $(this).attr("href");
}
});
回答by Willster
There is no jQuery plugin that I know of to do such a thing.
我知道没有 jQuery 插件可以做这样的事情。
You cannot trigger a css psuedo class such as ":hover". You can however loop through the anchor elements and add a css class ".hover" on touchstart and touchend events as follows:
您不能触发 css 伪类，例如 ":hover"。但是，您可以遍历锚元素并在 touchstart 和 touchend 事件上添加一个 css 类“.hover”，如下所示：
var pageLinks = document.getElementsByTagName('a');
for(var i = 0; i < pageLinks.length; i++){
pageLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
pageLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}
To add a double finger tap gesture recognizer, you can use a plugin such as: http://plugins.jquery.com/project/multiswipe
要添加双指点击手势识别器，您可以使用插件，例如：http: //plugins.jquery.com/project/multiswipe
回答by DADU
Here's an optimized version of the jQuery code provided by Richard JP Le Guen:
这是 Richard JP Le Guen 提供的 jQuery 代码的优化版本：
$(document).ready(function() {
$('a').each(function() {
var clicked = false;
$(this).bind('click', function() {
if(!clicked) return !(clicked = true);
});
});
});
回答by daniel18387
There is a more simpler way to fix the issue with iOS and hover states, using CSS. For the link you have an issue with set the cursorproperty to pointerand the hover state will be ignored on iOS. For all links to function as expected, see below:
有一种更简单的方法可以使用 CSS 解决 iOS 和悬停状态的问题。对于链接，您在将cursor属性设置pointer为时遇到问题，并且在 iOS 上将忽略悬停状态。有关按预期运行的所有链接，请参见下文：
a
{cursor: pointer;}
