1

Android ブラウザーで、ハンドラーがページ コンテンツ (の一部) を置き換える要素をクリックすると、クリックした正確な場所の下にある新しい要素は、クリックを離してもホバー状態と見なされます。

hoverCSS の状態のみが関係している、focusまたはactiveこの動作を示さないことに注意してください。

私の問題を再現する最小限のコード例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript">
    function toButton() {
      document.getElementById("body").innerHTML =
                            '<input type="button" onclick="toLink()" value="Click me!">';
    }
    function toLink() {
      document.getElementById("body").innerHTML =
                            '<a href="javascript:toButton()">Click me!</a>';
    }
  </script>
  <style type="text/css">
    body * { font-size: 400%; }
    input { color: black; }
    input:hover { color: red; }
    a { color: blue; }
    a:hover { color: red; }
  </style>
</head>
<body id="body">
  <script type="text/javascript">toButton();</script>
</body></html>

そして、理解しやすいようにいくつかのスクリーンショットを示します。

例

これ2. Hoveringは完全に正常ですが、ご覧3. After clickのとおり、リンクがまだホバリングされていると考えられますが、実際にはそうではなく、 として表示されるはず4. Expectedです。

ボタンのテキストの幅が広い場合 (例: Click on my very left side to trigger the problem)、 をクリックするClick onと問題が発生しますが、 をクリックしても問題が発生しvery left side to trigger the problemないことに注意してください。

ブラウザにホバー状態を強制的に再計算させる方法、またはキャンセルする方法はありますか? 可能であれば、特定の要素（つまり、私の例ではリンク）を変更するのではなく、ページのすべての要素がそのバグから保護されるようにグローバルレベルで動作する必要があります（影響を受ける要素がたくさんあり、ハンドラーを追加しています1 つ 1 つにするのは本当に面倒なので、ページ全体の解決策が本当に必要です)。

私の例では問題を切り分けるために使用していませんが、実際には jQuery を使用しているため、それを使用したソリューションは大歓迎です。

重要な場合は、Samsung Galaxy Note 10.1 / Android 4.1 でこれをテストしています。

4

0 に答える 0