CSS or Javascript Event for touch while scrolling

Question

Let's say I have multiple boxes among each other:

<div style="width: 100%; height: 100px; background-color: red">
stuff
</div>

If I click (touch) on them, I can easily change the background color with CSS (:hover, :focus) or with Javascript/jQuery.

For the user experience, I want to communicate to the user that he can click on that box as soon as his finger touches the screen. When the user is touching the box with the intention to scroll down, the box should change its background color slightly.

Every jQuery event for clicking or touching an object triggers only if I directly 'click' on it, not when I touch it while scrolling.

How can I listen for a screen touch, if it is not a direct click? Since it should only change the background color, it doesn't matter if it is pure CSS or javascript.

Yes, I want it to change as soon as the user touches the element, even if no click was intended. — Skalibran, Jan 18 '17 at 10:27

score 0 · Answer 1 · answered Jan 18 '17 at 08:26

0

Try to use this library with "tap" event: https://github.com/jonpacker/jquery.tap

<script src="https://rawgit.com/jonpacker/jquery.tap/master/jquery.tap.min.js"></script>
<script>
  $(".tappable").tap(function() {
    console.log("Tappable was tapped!");
  });
</script>

Or you can also use Jquery Mobile library: https://api.jquerymobile.com/tap/

answered Jan 18 '17 at 08:26

eladc

243
2
6

Thanks for your answer! I've tested both the plugin and jQuery Mobile, unfortunately, all of these seem to work similar to the ordinary click event. – Skalibran Jan 18 '17 at 09:49

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

While this question is not comparable to mine, the top answer helped me with my problem.

$('.myBox').on({
'touchstart mousedown': function (e) {
  $(this).css('opacity', 0.9);
},
'touchend mouseup': function (e) {
    $(this).css('opacity', 1);
}
});

edited May 23 '17 at 11:45

Community

1
1

answered Jan 18 '17 at 11:14

Skalibran

459
1
5
19

CSS or Javascript Event for touch while scrolling

2 Answers2