在jQuery中“结合”事件

时间:2012-08-28 11:12:36

标签: javascript-events jquery

TL; DR:

如何将三个“触摸”浏览器事件与延迟相结合以模拟“长按”事件,并使其可用于jQuery以附加到任何适当的DOM元素?

完整问题

由于我认为iPad和其他触摸屏设备最可靠只能触发touchstart,touchmove和touchend事件,我想需要一个复杂或另一个复杂程度的框架,以便对手势,长按等事件做出反应和多次接触。

我还没准备好在我当前的项目中添加一个移动框架,所以为此,我添加了一些代码,似乎在模拟“长”按下时效果很好,并且允许有人来,并触发预定义的处理程序或为此类事件添加额外的处理程序:

var touchTimeout = null;
var $element = null;

$('div#SomeIdOnADIVElementOrTwo')
    .on('touchstart', function(){
        $element = $(this);
        //not sure if this is absolutely necessary, but it was based off an Internet resource found when it didn't work like I wanted it to - and it works, so...
        touchTimeout = setTimeout(
            function($element){
                return function(){
                    $($element).trigger('longpress');
                };
            }($element), 1000
        );
    })
    .on('touchend touchmove', function(){
        clearTimeout(touchTimeout);
    })
    .on('longpress', function(){
        $(this).dblclick();
    });

但是,这当然仅限于我在第一行传递给原始jQuery全向函数调用的选择器或jQuery对象(在我的例子中,是一个id为SomeIdOnADIVElementOrTwo的div)。我想做的是将三个事件'touchstart','touchmove'和'touchend'(连同延迟/超时等)定义为一个标准的“事件”,有人可以“处理”任何“可触摸” “DOM对象。

这就像将我的选择器更改为*一样简单吗?我很确定这会在概念上有效,但我不禁认为在具有大量元素的页面上很难处理 - 或者我可能对事件处理程序的注册方式感到困惑?我是否可能更好地使用.longPress()函数扩展jQuery(与.click().dblClick()函数一样)?这不可行或不可能吗?它是非常简单的,我错过了什么?

0 个答案:

没有答案