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.

Not sure I understand what you're trying to achieve? The hover works fine for me? — S Craig, May 09 '16 at 10:32
There is no hover on smartphone. The device just can't detect it. You will get just clicks, drags etc. — Przemysław Kaczmarczyk, May 09 '16 at 10:46
What is supposed to be a `hover` event on a mobile phone? I suppose it has to be some kind of click event or at least some touch event on the screen. — Francisco Romero, May 27 '16 at 09:51
@Error404 Definitely not `click` event.. But maybe something like `touch` event.. — choz, May 27 '16 at 10:10
Some smartphones do support hover. My Galaxy S5 for example, with a couple of settings changed. In this case, it's picked up in a web page the same way a mouse hover would be on a PC. — Mark K Cowan, Apr 08 '18 at 15:02

choz · Accepted Answer · 2016-06-03T01:19:42.450

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>

Useful source about `touch` events http://www.javascriptkit.com/javatutors/touchevents.shtml — Nafis, Apr 17 '20 at 00:05

score 0 · Answer 2 · answered May 27 '16 at 09:37

The hover event is triggered with click/touch events on mobile phone, because you can not simply hover an element on a touch screen.

You can demonstrate this behaviour by simply using the css hover and/or focus selectors to modify content, you can see, that before clicking elements remain the same, but after clicking they retain modified styles.

score 0 · Answer 3 · edited May 23 '17 at 11:51

0

bind touchstart on a parent. Something like this will work:

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

You don't need to do anything in the function, leave it empty. This will be enough to get hovers on touch, so a touch behaves more like :hover and less like :active.

Similar question How do I simulate a hover with a touch in touch enabled browsers?

edited May 23 '17 at 11:51

Community

1
1

answered May 27 '16 at 12:32

smarttechy

852
1
9
23

1

That event will fire only when we touch the body. This does not allow me to drag and detect hovers on elements. – choz Jun 02 '16 at 02:22

score 0 · Answer 4 · answered May 30 '16 at 08:44

The code you provided in your Fiddle or Codepen is working fine. So what's the fuss?

Well, in mostly air or touch-triggering gadgets like smartphones and tablets, you cannot simply use the hover thing function because you can't hover thing on it to make some events. You can only use the hover function when you are using for example a detachable keyboard for tablet (or something that uses mouse or finger scroller).

Detecting hover or mouseover on smartphone browser

4 Answers4

Linked