javascript - hammer.js要给每个元素new一次才可使用？没有this功能？

问题描述

问 题

<div class="content-like">11</div>
<div class="content-like">22</div>
<div class="content-like">33</div>
<div class="content-like">44</div>

js的代码是

for(var i=0;i<2;i++){
     new Hammer( $( ".content-like" )[ i ], {
      domEvents: true
    } );
}


$( ".content-like" ).on( "tap", function( e ) {
    $(this).addClass('likeorange')
})

背景：我希望点击.content-like元素时，会给.content-like新增一个class叫做likeorange

问题：上述代码可以正确执行，可是需要用for循环给每个元素都new一次，这样内存消耗岂不是很大？hammer里面有没有this的用法呢？

解决方案

没用过hammerjs。

我翻看了一下hammerjs文档，再看回题主的代码。

奇了个怪，$在这里,是用了jquery还是zepto么？

我看到hammer的示例代码：http://codepen.io/jtangelder/...

var myElement = document.getElementById('myElement');
// We create a manager object, which is the same as Hammer(), but without the presetted recognizers. 
var mc = new Hammer.Manager(myElement);

// Tap recognizer with minimal 2 taps
mc.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );
// Single tap recognizer
mc.add( new Hammer.Tap({ event: 'singletap' }) );

// we want to recognize this simulatenous, so a quadrupletap will be detected even while a tap has been recognized.
mc.get('doubletap').recognizeWith('singletap');
// we only want to trigger a tap, when we don't have detected a doubletap
mc.get('singletap').requireFailure('doubletap');

mc.on("singletap doubletap", function(ev) {
    myElement.textContent += ev.type +" ";
});

示例代码即使用on 也是用的hammer产出的一个对象，而不是直接$('xxx').on

题主的代码让我觉得，题主是用了$对象（可能是jquery或者zepto的on绑定事件方式，而一般来讲jquery跟zepto并没有tap事件的处理，tap是作为一个自定义事件，在zepto的扩展里实现的事件触发）

这篇关于javascript - hammer.js要给每个元素new一次才可使用？没有this功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！