如何绑定“触摸启动”和“点击”事件，但不回应两者?

我正在开发一个需要在多种设备上运行的移动网站。目前让我头疼的是黑莓手机。

我们需要同时支持键盘点击和触摸事件。

理想情况下，我会使用:

$thing.click(function(){...})

但我们遇到的问题是，一些黑莓设备从触摸到触发点击有一个非常恼人的延迟。

补救方法是使用touchstart:

$thing.bind('touchstart', function(event){...})

但是如何绑定两个事件，但只触发一个事件呢?对于键盘设备，我仍然需要click事件，但当然，如果我使用的是触摸设备，我不想让click事件触发。

一个额外的问题:有没有办法做到这一点，并额外适应那些甚至没有touchstart事件的浏览器?在研究中，看起来黑莓OS5不支持touchstart，因此也需要依赖于该浏览器的点击事件。

附录:

也许一个更全面的问题是:

使用jQuery，是否可能/建议使用相同的绑定同时处理触摸交互和鼠标交互?

理想情况下，答案是肯定的。如果不是，我确实有一些选择:

我们使用WURFL来获取设备信息，这样就可以创建我们自己的设备矩阵。根据设备的不同，我们将使用touchstart或click。通过JS检测浏览器中的触摸支持(我需要做更多的研究，但这似乎是可行的)。

然而，还有一个问题:支持这两种功能的设备怎么办?我们支持的一些手机(即诺基亚和黑莓)既有触摸屏又有键盘。这让我又回到了最初的问题……有没有一种方法可以同时兼顾两者?

当前回答

另一种更好维护的实现。然而，这种技术也会做事件。stopPropagation()。在100毫秒内，没有捕捉到任何其他元素的单击。

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

2012-04-28 14:33:17

其他回答

找到文档滚动移动的差异(水平和垂直)touchstart和touchend，如果其中一个大于1像素，那么它是移动而不是单击

var touchstartverscrollpos , touchstarthorscrollpos;


    $('body').on('touchstart','.thumbnail',function(e){

        touchstartverscrollpos = $(document).scrollTop();
        touchstarthorscrollpos = $(document).scrollLeft();


    });



    $('body').on('touchend','.thumbnail',function(e){


        var touchendverscrollpos = $(document).scrollTop();
        var touchendhorscrollpos = $(document).scrollLeft();

        var verdiff = touchendverscrollpos - touchstartverscrollpos;
        var hordiff = touchendhorscrollpos - touchstarthorscrollpos;


        if (Math.abs(verdiff) <1 && Math.abs(hordiff)<1){

// do you own function () here 



            e.stopImmediatePropagation();

            return false;
        }

    });

2017-01-25 04:20:54

我刚刚想出了一个想法，记住如果ontouchstart被触发。在本例中，我们在支持onclick事件的设备上，并希望忽略onclick事件。因为ontouchstart应该总是在onclick之前被触发，我使用这个:

<脚本> touchAvailable = false;> < /脚本 <按钮ontouchstart = " touchAvailable = true;myFunction();" onclick="if(!touchAvailable);按钮“>按钮< / >

2014-12-15 15:48:10

我也在开发Android/iPad web应用，似乎只要使用“touchmove”就足以“移动组件”(不需要touchstart)。通过禁用touchstart，你可以使用.click();从jQuery。它实际上在工作，因为它没有被touchstart重载。

最后，你可以binb .live("touchstart"， function(e) {e.s stoppropagation ();});要让touchstart事件停止传播，living room需要单击()来触发。

这对我很管用。

2012-03-27 04:12:50

你可以使用一个计数器来代替超时:

var count = 0;
$thing.bind('touchstart click', function(){
  count++;
  if (count %2 == 0) { //count 2% gives the remaining counts when devided by 2
    // do something
  }

  return false
});

2012-11-09 16:29:50

利用点击总是会在触摸事件之后发生的事实，以下是我在不使用超时或全局标志的情况下消除“幽灵点击”的方法。

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

基本上，只要在元素上触发ontouchstart事件，就会设置一个标记，然后在点击到来时删除(并忽略)。

2013-02-08 21:11:52

如何绑定“触摸启动”和“点击”事件，但不回应两者?

推荐文章

最新文章

标签