web-dev-qa-db-ja.com

スマートフォンのブラウザーでのホバーまたはマウスオーバーの検出

私のアプリにはアルファベットのスクロールバー（ASB）があり、ほとんどのスマートフォンのContactsアプリにあります。

現在、ASBで指をtouchstart touchend click etc..すると、特定のアイテムにスクロールするのにnoの問題があります。しかし、スマートフォンでhoverまたはmouseoverイベントをキャプチャすることに問題があります。

touchstart touchswipe touchend mouseenter mousemoveまたはhoverを試してみましたが、うまくいきませんでした。

Fiddle または Codepen は、携帯電話で遊ぶためのものです。

任意の提案をいただければ幸いです。

javascriptjqueryhtmlcssmobile
12
vadi taslim

TL; DR; touchmove、touchstartおよびtouchendは、これを可能にしたイベントです。

ネイティブアプリ以外ではスマートフォンでホバーイベントの機能を提供することは不可能だと人々が繰り返し言っていることがわかりました。

しかし、最新のスマートフォンブラウザは実際に機能を提供しています。解決策は文字通り非常に単純な場所にあることに気づきました。少し調整するだけで、この動作を少し浮気しながらクロスプラットフォームにシミュレーションする方法を理解しました。

したがって、of toucheventsのほとんどは、ユーザーが画面上でタッチした場所に必要な情報を持つ引数を渡します。

例

var touch = event.originalEvent.changedTouches[0];
var clientY = touch.clientY;
var screenY = touch.screenY;

また、ASBのすべてのボタンの高さを知っているので、ユーザーが要素をホバーした場所を計算できます。

CodePen は、モバイルタッチデバイスで簡単に試すためのものです。 （これはタッチデバイスでのみ機能しますが、chromeトグルデバイスモードで使用できます）

そしてこれが私の最後のコードです、

var $startElem, startY;

function updateInfo(char) {
  $('#info').html('Hover is now on "' + char + '"');
}

$(function() {
  var strArr = "#abcdefghijklmnopqrstuvwxyz".split('');
  for (var i = 0; i < strArr.length; i++) {
    var $btn = $('<a />').attr({
        'href': '#',
        'class': 'btn btn-xs'
      })
      .text(strArr[i].toUpperCase())
      .on('touchstart', function(ev) {
        $startElem = $(this);
        var touch = ev.originalEvent.changedTouches[0];
        startY = touch.clientY;
        updateInfo($(this).text());
      })
      .on('touchend', function(ev) {
        $startElem = null;
        startY = null;
      })
      .on('touchmove', function(ev) {
        var touch = ev.originalEvent.changedTouches[0];
        var clientY = touch.clientY;

        if ($startElem && startY) {
          var totalVerticalOffset = clientY - startY;
          var indexOffset = Math.floor(totalVerticalOffset / 22); // '22' is each button's height.

          if (indexOffset > 0) {
            $currentBtn = $startElem.nextAll().slice(indexOffset - 1, indexOffset);
            if ($currentBtn.text()) {
              updateInfo($currentBtn.text());
            }
          } else {
            $currentBtn = $startElem.prevAll().slice(indexOffset - 1, indexOffset);
            if ($currentBtn.text()) {
              updateInfo($currentBtn.text());
            }
          }
        }
      });

    $('#asb').append($btn);
  }
});
#info {
  border: 1px solid #adadad;
  position: fixed;
  padding: 20px;
  top: 20px;
  right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
  No hover detected
</div>
<div id="asb" class="btn-group-vertical">
</div>
6
vadi taslim

タッチスクリーン上の要素に単純にカーソルを合わせることができないため、ホバーイベントは携帯電話のクリック/タッチイベントでトリガーされます。

CSSのホバーセレクターやフォーカスセレクターを使用してコンテンツを変更するだけで、この動作を示すことができます。要素をクリックする前は同じままですが、クリックした後は変更されたスタイルが保持されます。

0
Leo Napoleon

FiddleまたはCodepenで提供したコードは正常に機能しています。では、大騒ぎは何ですか？

まあ、スマートフォンやタブレットのようなほとんどの空気またはタッチトリガーガジェットでは、ホバーモノ機能に単純にホバーすることはできません。ホバー機能を使用できるのは、たとえばタブレット用の取り外し可能なキーボード（またはマウスや指のスクローラーを使用するもの）を使用している場合のみです。

0
rhavendc

親にタッチスタートをバインドします。このようなものが機能します：

$('body').bind('touchstart', function() {});

関数では何もする必要がなく、空のままにします。これはタッチでホバーを取得するのに十分なので、タッチは：hoverのように動作し、：activeのようには動作しません。

同様の質問 タッチ対応のブラウザーでホバーをシミュレートするにはどうすればよいですか？

0
smarttechy