jQuery Hammer.js似乎无法与Zepto一起使用。

Question

我正在尝试使用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…]

这可能是什么原因导致的？

- jnbdz

Answer 1

正如您在官方文档中所看到的，语法有点不同：

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

为了像你现在这样使用它，即element.hammer...，你需要jQuery插件Hammer.js。

仅此而已吗？实际上不是，如果查看此插件的源代码，您会看到以下两行：

第9行：jQuery(this.element).triggerHandler({ 第25行：})(jQuery, Hammer, "hammer"); 问题在于Zepto无法识别jQuery。您可以将出现的jQuery重命名为Zepto，但更好的解决方案是由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>

- Andreas Schwarz