javascript - Detecting hover or mouseover on smartphone browser

Question

I have an alphabetical scrolling bar (ASB) in my app, which most smartphones have in their Contacts app.

Now, I have no problem to scroll to specific item when my finger touchstart touchend click etc.. on the ASB. But, I have problem on capturing hover or mouseover event on my smartphone.

I have tried touchstart touchswipe touchend mouseenter mousemove or hover with no lucks.

Here's the Fiddle or Codepen to play around on your mobile.

Any suggestion is appreciated.

Answer 1

TL;DR; touchmove, touchstart and touchend are the events that made this possible.

---

I've found that people keep telling me that it's not possible on non-native app to provide the functionality of hover event on smartphone.

But, the modern smartphone browsers have actually provided the functionalities. I realized that the solution is literally lying in a very simple place. And with few tweaks, I've figured how I can simulate this behavior to cross-platform even though it's a bit cheating.

So, Most oftouchevents are passing the arguments that have the needed information where the user touches on the screen.

E.g

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

And since I know the height of every button on my ASB, I can just calculate where the user hovers the element on.

Here's the CodePen to try it easier on mobile touch devices. (Please note this only works on touch devices, you can still use chrome on toggled device mode)

And this is my final code,

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>