添加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樣式事件處理程序

回答

相關問題