web-dev-qa-db-ja.com

iOSの自動ホバー修正？

各CSSホバー（外部スタイルシートにあります）を自動的にループし、ダブルタッチダウンイベントでバインドするjQueryプラグインまたはJavaScriptスクリプトはありますか？

  • タッチダウン1-CSS：ホバーがトリガーされます
  • タッチダウン2-クリック（次のリンクまたはフォームアクション）

このようなものがまだない場合は、どのように作成できますか（ガイドライン）？

編集：

明確にするために、私はダブルタップを探していません。タッチダウン1は、タッチダウン2と同じように単一のタブです。両方の間に0秒未満、または3分までの間隔があり、それがユーザーの選択です。

触らないで：

  • ：ホバー->要素が表示されます
  • クリック->次のリンクまたはその他のアクション

タッチ（iOS）：

  • タッチダウン1->要素が表示されます
  • タッチダウン2->リンクまたは他のアクションをたどる
javascriptiphonecsshover
16
DADU

これを試して：

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

...または 私のWebサイトのデモ をチェックしてください。 iPadでのみその魔法が機能するように設定されていることに注意してください-iOSのすべてのバージョンを検出することは私の本の別の質問です;）

それは次の事実に基づいて機能します...

Iphoneまたはipadでリンクをクリックすると、シミュレートされたマウスホバーが残り、そのリンクでa：hovercssスタイリングがトリガーされます。リンクに同じページを表示するJavaScriptハンドラーがある場合、別のリンクをクリックするまでホバー状態は変わりません。

引用： 前のリンクがjavascriptに置き換えられた後、新しいリンクでSafari iphone/ipadの「マウスホバー」

13
Richard JP Le Guen

私はこれを使用しました：

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

以前は、特定の要素にホバーできるようにしました。もちろん、自分で使用するために微調整する必要がありますが、タッチアンドホールドのホバー効果を可能にする優れた方法です。

6
Rich Bradshaw

これはさらに最適化されたバージョンで、closeing：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);
    }
}
3
Steven Vachon

このアップデートは、Richard JP LeGuensソリューションで作成しました。それは素晴らしい働きをしますが、私のバージョンは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>
2
Julian F. Weinert

これは私のために働いた！

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

    });
1
crivers

そのようなことをするために私が知っているjQueryプラグインはありません。

「：hover」などのcsspsuedoクラスをトリガーすることはできません。ただし、次のように、アンカー要素をループして、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);
}

ダブルフィンガータップジェスチャレコグナイザーを追加するには、次のようなプラグインを使用できます。 http://plugins.jquery.com/project/multiswipe

1
Willster

CSSを使用して、iOSとホバー状態の問題を修正するより簡単な方法があります。リンクの場合、cursorプロパティをpointerに設定すると問題が発生し、iOSではホバー状態が無視されます。期待どおりに機能するすべてのリンクについては、以下を参照してください。

a
{cursor: pointer;}
0
daniel18387

Richard JP LeGuenが提供するjQueryコードの最適化バージョンは次のとおりです。

$(document).ready(function() {

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

        var clicked = false;

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

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