添加iPhone OS事件的jQuery样式事件处理程序

我正在寻找一个超级简单的jQuery扩展。基本上我需要使用jQuery没有明确支持的一些事件。这些事件是iPhone触摸事件，如ontouchstart,ontouchend和ontouchmove。添加iPhone OS事件的jQuery样式事件处理程序

我把它通过这方面的工作：

// Sucks 
$('.clickable').each(function() { 
    this.ontouchstart = function(event) { 
    //do stuff... 
    }; 
}

哪一种吸并unjqueryish。这是我想什么：

// Better 
$('.clickable').touchstart(function() { 
    //do stuff... 
}

甚至更好1.4

// Awesome 
$('.clickable').live('touchstart', function() { 
    //.. do stuff 
}

这些活动不需要特殊处理，并应工作就像任何其他的事件，但我似乎无法弄清楚如何扩展jquery使其像所有其他事件一样工作。

来源

2010-01-25 Alex Wayne

实际上进一步告诫，有干的活（“touchstart”，...）之间的差异;并做绑定（'touchstart'，...）; ？ – Avisra 2011-05-19 19:13:35

是的：http://stackoverflow.com/questions/2690370/live-vs-bind – 2011-05-19 19:29:58

这就是现在的作品，就像它的上面掐灭，在最新的jQuery版本上。去jQuery！

来源

2010-10-23 00:51:13

就像它被剔除在哪里？ – nornagon 2010-11-05 23:34:58

在我原来的帖子里。 '$（'。clickable'）。live（'touchstart'，fn）'在jQuery 1.4.2及更高版本上运行得非常好。 '绑定'也适用。 – 2010-11-06 06:05:06

jQuery.com是这样一个很好的信息来源。

如果您构建您的own plugin，您可以在方法调用中使用任何您喜欢的命名。

来源

2010-01-25 19:46:22

我希望只是捎带所有现有的事件处理，只是添加一些更多的事件类型的支持。没有什么特别的，这些需要特殊的处理超出点击或mousedown做。 – 2010-01-25 19:49:44

这里是一个开始：

$.fn.touchstart = function(fn) { return this[fn ? "bind" : "trigger"]("touchstart", fn); }; 
$.event.special.touchstart = { 
    setup: function() { 
     $.event.add(this, "mouseenter", extendedClickHandler, {}); 
    }, 
    teardown: function() { 
     $.event.remove(this, "mouseenter", extendedClickHandler); 
    } 
};

哪里extendedClickHandler是函数做什么它该做的。

此处了解详情：http://brandonaaron.net/blog/2009/03/26/special-events

来源

2010-01-25 19:59:54 jerone

我写的插件，如果用户确实有提供触控，使用，否则，呼叫单击

jQuery.event.special.tabOrClick = { 
    setup: function (data, namespaces) { 
     var elem = this, $elem = jQuery(elem); 

     if (window.Touch) { 
      $elem.bind('touchstart', jQuery.event.special.tabOrClick.onTouchStart); 
      $elem.bind('touchmove', jQuery.event.special.tabOrClick.onTouchMove); 
      $elem.bind('touchend', jQuery.event.special.tabOrClick.onTouchEnd); 
     } else { 
      $elem.bind('click', jQuery.event.special.tabOrClick.click); 
     } 
    }, 

    click: function (event) { 
     event.type = "tabOrClick"; 
     jQuery.event.handle.apply(this, arguments); 
    }, 

    teardown: function (namespaces) { 
     var elem = this, $elem = jQuery(elem); 
     if (window.Touch) { 
      $elem.unbind('touchstart', jQuery.event.special.tabOrClick.onTouchStart); 
      $elem.unbind('touchmove', jQuery.event.special.tabOrClick.onTouchMove); 
      $elem.unbind('touchend', jQuery.event.special.tabOrClick.onTouchEnd); 
     } else { 
      $elem.unbind('click', jQuery.event.special.tabOrClick.click); 
     } 
    }, 

    onTouchStart: function (e) { 
     this.moved = false; 
    }, 

    onTouchMove: function (e) { 
     this.moved = true; 
    }, 

    onTouchEnd: function (event) { 
     if (!this.moved) { 
      event.type = "tabOrClick"; 
      jQuery.event.handle.apply(this, arguments) 
     } 
    } 
}; 

$("#xpto").bind("tabOrClick", function() { 
    alert("aaaa"); 
});

来源

2010-08-24 22:48:10 Alexandre

我已经对亚历山大的插件做了一个小更新，包括Android支持。 Android的浏览器目前不支持window.Touch触摸支持检测方法。

我喜欢Alexandre的脚本如何等待以确保移动不会发生，以防止在用户滑动滚动屏幕时触发事件。然而，这种方法的一个垮台就是，它在等待用户在触发之前将他们的手指从屏幕上抬起而导致其自身的延迟。我已经更新了他的插件，以包含一个适用于用户正在触摸的项目的“趣味”类。如果您利用该课程，则可以在移动检查完成之后立即向用户提供视觉反馈，而不会导致实际事件触发。

jQuery.event.special.touchclick = { 
    setup: function (data, namespaces) { 
    var elem = this, $elem = jQuery(elem); 

    var ua = navigator.userAgent.toLowerCase(); 
    var isAndroid = ua.indexOf("android") > -1; 

    if (window.Touch || isAndroid) { 
      $elem.bind('touchstart', jQuery.event.special.touchclick.onTouchStart); 
      $elem.bind('touchmove', jQuery.event.special.touchclick.onTouchMove); 
      $elem.bind('touchend', jQuery.event.special.touchclick.onTouchEnd); 
     } else { 
      $elem.bind('click', jQuery.event.special.touchclick.click); 
     } 
    }, 

    click: function (event) { 
     event.type = "touchclick"; 
     jQuery.event.handle.apply(this, arguments); 
    }, 

    teardown: function (namespaces) { 
     var elem = this, $elem = jQuery(elem); 
     if (window.Touch) { 
      $elem.unbind('touchstart', jQuery.event.special.touchclick.onTouchStart); 
      $elem.unbind('touchmove', jQuery.event.special.touchclick.onTouchMove); 
      $elem.unbind('touchend', jQuery.event.special.touchclick.onTouchEnd); 
     } else { 
      $elem.unbind('click', jQuery.event.special.touchclick.click); 
     } 
    }, 

    onTouchStart: function (e) { 
     this.moved = false; 

     $(this).addClass('touchactive'); 
    }, 

    onTouchMove: function (e) { 
     this.moved = true; 

     $(this).removeClass('touchactive'); 
    }, 

    onTouchEnd: function (event) { 
     if (!this.moved) { 
      event.type = "touchclick"; 
      jQuery.event.handle.apply(this, arguments) 
     } 

     $(this).removeClass('touchactive'); 
    } 
};

我还的情况下，发布这github上有一些被发现https://github.com/tuxracer/jquery-touchclick

来源

2011-12-26 12:59:11 tuxracer

添加iPhone OS事件的jQuery样式事件处理程序

回答

相关问题