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

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

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

理想情况下，我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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

当前回答

你可以尝试这样做:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

2011-09-23 14:21:26

其他回答

在试图解决这个问题时，有很多事情需要考虑。大多数解决方案要么中断滚动，要么不能正确处理幽灵点击事件。

完整的解决方案请参见https://developers.google.com/mobile/articles/fast_buttons

注意:你不能在每个元素的基础上处理鬼点击事件。延迟的点击是由屏幕位置触发的，所以如果你的触摸事件以某种方式修改了页面，点击事件将被发送到页面的新版本。

2012-07-18 14:29:40

找到文档滚动移动的差异(水平和垂直)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

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

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

对于我来说，最好的答案是motie给出的，我只是试图让他的代码更可重用，所以这是我的贡献:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});

2014-08-05 07:08:05

我发现的最好方法是编写touch事件，并让该事件以编程方式调用正常的click事件。这样你就有了所有正常的点击事件，然后你只需要为所有的触摸事件添加一个事件处理程序。对于每一个你想要使其可触摸的节点，只需向其添加“touchable”类来调用触摸处理程序。用Jquery，它的工作原理是这样的，有一些逻辑，以确保它是一个真正的触摸事件，而不是一个假阳性。

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});

2016-12-06 04:38:51

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

推荐文章

最新文章

标签