jquery-mobile - 为什么点击事件被 touchstart 事件抑制？

Question

我有这个代码：

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

仅触发 touchstart。谁能解释为什么？

PS：这就是我包含 jQuery mobile 脚本的方式： <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

编辑：我想在我的一个 div 上引入悬停功能，我认为使用点击事件就像单击和使用 touchstart 一样悬停。

$('.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();
      });

使用此代码，我的 div 上的滑动事件可以正常工作，但对于内部元素，我无法重现滑动事件，只有点击被触发。我真的想不通为什么。

Answer 1

Touchstart 似乎不再作为 jQuery Mobile 版本中的原生事件提供。1.4.5 也许您可以使用“tap”和“swipe”（或“swipeleft”/“swiperight”）来实现您的目标？您正在创建的内容并不完全清楚。

注意：您可以做的一件事是轻松自定义原生 jQuery Mobile 功能以进行滑动。详见http://api.jquerymobile.com/swipe/

在进行 .on("swipe"...) 绑定之前，您可以更改 jQuery swipe 使用的测试值。它就像

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

您可以通过警报或 console.log() 验证数据设置。也许这对你有用？嗯..通过处理垂直距离阈值，您实际上可以暂时将“滑动”定义为“向上滑动”，然后您可以使用向左滑动、向右滑动和向上滑动。

Answer 2

使用如下语法：

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

      alert(3);

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

      alert(4);

   }
   e.stopPropagation();
});