Question

是否有jQuery插件或JavaScript脚本自动循环遍历每个CSS悬停（在外部样式表中找到）并将其与双触地事件绑定？

Touchdown 1 - CSS：触发悬停
触地得分2 - 点击（链接跟随或表单行动）

如果还没有这样的东西，是否可以制作以及如何（指南）？

编辑：

要清楚，我不是在寻找双击。触地1是一个单独的标签，就像Touchdown 2一样。在两者之间或多达3分钟之间可以有少至0秒，这是用户的选择。

没有触摸：

：悬停 - ＆gt;元素变得可见
点击 - ＆gt;以下链接或其他行动

触摸（iOS）：

触地1 - ＆gt;元素变得可见
触地2 - ＆gt;以下链接或其他行动

Answer 1

试试这个：

<!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>

...或查看demo on my web site。请注意，它的设置只能在iPad上发挥作用 - 检测iOS的所有版本是我书中的另一个问题;）

它的工作原理是......

点击iphone或ipad上的链接后，它会留下一个模拟鼠标悬停，触发该链接上的a：hover css样式。如果链接具有使您保持在同一页面的javascript处理程序，则在您单击其他链接之前，悬停状态不会更改。

引文：Safari iphone/ipad “mouse hover” on new link after prior one is replaced with javascript

Answer 2

我用过这个：

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

之前，允许悬停在某些元素上。显然你需要调整它以供自己使用，但这是一种允许触摸并保持悬停效果的好方法。

Answer 3

这是一个进一步优化的版本，它还处理关闭：hover

您必须使用

封装您的网站

<div id="container"></div>

让它发挥作用。只是将结束事件放在身体上没有任何作用

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

Answer 4

我创建了此更新apon Richard JP Le Guens解决方案。它的工作原理很棒，但我的版本修复了DADU认可的问题。

我还修复了他的解决方法以检测iPad。我的解决方案也检测到任何其他触摸设备（除了MS表面上的IE10，我不记得MS特殊处理）。

我的修复不是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>

Answer 5

我知道没有jQuery插件可以做这样的事情。

你不能触发css psuedo类，例如“：hover”。然而，您可以循环遍历锚元素并在touchstart上添加一个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);
}

要添加双指点按手势识别器，您可以使用以下插件： http://plugins.jquery.com/project/multiswipe

Answer 6

这对我有用！

// Ipad Navigation Hover Support
    $('#header .nav li a').bind('touchstart touchend', function(e) {
        if( $(this).attr("href") != "" ){
            window.location = $(this).attr("href");
        }

    });

Answer 7

这是Richard JP Le Guen提供的jQuery代码的优化版本：

$(document).ready(function() {

    $('a').each(function() {

        var clicked = false;

        $(this).bind('click', function() {

            if(!clicked) return !(clicked = true);
        });
    });
});

Answer 8

使用CSS可以更简单地解决iOS和悬停状态问题。对于链接，您将cursor属性设置为pointer时遇到问题，iOS上将忽略悬停状态。要使所有链接按预期运行，请参阅以下内容：

a
{cursor: pointer;}

iOS自动悬停修复？

8 个答案: