Why tap event is suppressed by touchstart event?

Question

I have this code:

$('.selector').on({
        touchstart: function (e) {
          e.preventDefault();
          alert(3);
          e.stopPropagation();
        },
        tap: function (e) {
          e.preventDefault();
          alert(4);
          e.stopPropagation();
        }
      });

Only touchstart is triggered. Can anybody explain why?

P.S. : This is how I include the script for jQuery mobile : <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

EDIT: I want to introduce a hover functionality on one of my div and I thought that with tap event it will be like clicking and with touchstart like hover.

$('.selector').on('tap swipe', function (e) {
        e.preventDefault();
        if(e.type == 'swipe') {
          alert(1);
        }
        if(e.type == 'tap') {
          alert(2);
        }
        e.stopPropagation();
      });

      $('.selector .sel1').on('tap swipe', function (e) {
        e.preventDefault();
        if(e.type == 'swipe') {
          alert(3);
        }
        if(e.type == 'tap') {
          alert(4);
        }
        e.stopPropagation();
      });

With this code the swipe event on my div works fine, but for inside element I can't reproduce the swipe event, only tap gets triggered. I really can't figure out why.

score 0 · Answer 1 · answered Oct 06 '14 at 08:20

0

Use syntax like this:

$('.selector').on("touchstart tap", function(e){
   e.preventDefault();
   if(e.type == "touchstart"){

      alert(3);

   }
   if(e.type == "tap"){

      alert(4);

   }
   e.stopPropagation();
});

answered Oct 06 '14 at 08:20

Ved

2,701
2
22
30

Even if I tap on my div the first event fired is touchstart so only alert 3 will be shown. I want to separate the behaviors of touchstart and tap. – bogdan.rusu Oct 06 '14 at 09:32

score 0 · Answer 2 · answered Apr 05 '15 at 07:59

Touchstart seems to no longer be offered as a native event within jQuery Mobile ver. 1.4.5 Perhaps you can use "tap" and "swipe" (or "swipeleft" / "swiperight") to achieve your goals? Its not entirely clear on what you are creating.

Note: one thing that you can do is easily customize the native jQuery Mobile functions for swipe. See details at http://api.jquerymobile.com/swipe/

Before you make the .on("swipe"...) binding you can change the test values used by jQuery swipe. Its as easy as

$.event.special.swipe.horizontalDistanceThreshold = 100;  // in lieu of 30px

You can verify that data setup via alerts or console.log(). Perhaps this will work for you? hmmm.. by working on vertical distance threshold, you could in essence temporarily define "swipe" to function as a "swipe-up", then you'd have swipeleft, swiperight and swipeup to play with.

Why tap event is suppressed by touchstart event?

2 Answers2