javascript - jQuery Hammer.js似乎不适用于Zepto

我正在尝试将jQuery.Hammer.js与Zepto v1.1.3一起使用但是由于某种原因，我收到此错误:

Uncaught TypeError: undefined is not a function

这是我的代码的一部分:

var element = $('#wrapper'); //document.getElementById('main');
console.log(element);
element.hammer({prevent_default: false, stop_browser_behavior: false}).on("dragleft"...

console.log(element)给我:

[div#wrapper.hfeed, selector: "#wrapper", forEach: function, reduce: function, push: function, sort: function…]

是什么原因造成的？

最佳答案

如您在official documentation中看到的，语法有点不同:

var hammertime = new Hammer(myElement, myOptions);
    hammertime.on('pan', function(ev) {
    console.log(ev);
});

要以您的方式使用它，即element.hammer...，则需要jQuery plugin for Hammer.js

这就是全部？并非如此，如果您检查此插件的source，则会看到以下两行:

第9行:jQuery(this.element).triggerHandler({
第25行:})(jQuery, Hammer, "hammer");
问题是Zepto无法识别jQuery。您可以通过Zepto重命名出现的事件，但是更好的解决方案是the one defined by gondo:

jQuery = Zepto;
$.fn.extend = function(obj) {
    $.extend($.fn, obj);
};

您的代码将变为:

<script src="/path/to/zepto.js"></script>
<script src="/path/to/hammer.js"></script>
<script>
    // We load this code _before_ jquery.hammer.js
    jQuery = Zepto; // We just need this one line
</script>
<script src="/path/to/jquery.hammer.js"></script>
<script>
    var element = $('#wrapper');
    element.hammer({prevent_default: false, stop_browser_behavior: false}).on("dragleft", function(e)...
</script>

关于javascript - jQuery Hammer.js似乎不适用于Zepto，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23959355/