2

次のようにハンマー インスタンスを作成します。

var el = document.getElementById("el");
var hammertime = Hammer(el);

その後、リスナーを追加できます。

hammertime.on("touch", function(e) {
    console.log(e.gesture);
}

ただし、次は何もしないため、このリスナーを削除できません。

hammertime.off("touch");

私は何を間違っていますか？ハンマーリスナーを取り除くにはどうすればよいですか? 現時点では、hammer.js のドキュメントはかなり貧弱なので.on()、.off()メソッドが存在するという事実以外には何も説明されていません。これはパフォーマンスが重要なアプリケーションであるため、jQuery バージョンは使用できません。

これを紹介する JSFiddle: http://jsfiddle.net/LSrgh/1/

4

4 に答える 4

6

わかりました、私はそれを理解しました。ソースは十分に単純で、次のことを行っています。

on: function(t, e) {
    for (var n = t.split(" "), i = 0; n.length > i; i++)
        this.element.addEventListener(n[i], e, !1);
    return this
},off: function(t, e) {
    for (var n = t.split(" "), i = 0; n.length > i; i++)
        this.element.removeEventListener(n[i], e, !1);
    return this
}

ここで注意すべきこと (悪いドキュメントは別として) は、それがイベントeのコールバック関数であるため、次のことを行っていることです。on

this.element.addEventListener("touch", function() {
    //your function
}, !1);

ただし、削除ではコールバックを渡さないので、次のようにします。

this.element.removeEventListener("touch", undefined, !1);

したがって、ブラウザは、バインドを解除しようとしている魔女関数を認識していません。私が行ったように、匿名関数を使用せずにこれを修正できます。

フィドル

詳細情報: Javascript removeEventListener が機能しない

于 2013-06-28T14:58:12.240 に答える
1

イベントを OFF でアンバインドするには、次のことを行う必要があります。

1) ON が呼び出されたときに設定された同じコールバック関数を OFF に引数として渡します。

2) ON イベントの設定に使用したものと同じ Hammer インスタンスを使用する

例：

var mc = new Hammer.Manager(element);
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.add(new Hammer.Tap());
var functionEvent = function(ev) {
    ev.preventDefault();
    // .. do something here
    return false;
};
var eventString = 'panstart tap';
mc.on(eventString, functionEvent);

バインド解除イベント:

mc.off(eventString, functionEvent);
于 2015-06-08T10:28:53.737 に答える
0

Nico が投稿したCodePen の例を次に示します。各 Hammer Manager を追跡するために、「タップ」イベント用の単純なラッパーを作成しました (ただし、他のものにも簡単に適用できます)。また、リスニングを簡単に停止するための kill 関数も作成しました :P

var TapListener = function(callbk, el, name) {
    // Ensure that "new" keyword is Used
    if( !(this instanceof TapListener) ) {
        return new TapListener(callbk, el, name);
    }
    this.callback = callbk;
    this.elem = el;
    this.name = name;
    this.manager = new Hammer( el );
    this.manager.on("tap", function(ev) {
            callbk(ev, name);
    });
}; // TapListener
TapListener.prototype.kill = function () {
    this.manager.off( "tap", this.callback );
};

したがって、基本的には次のようにします。

var myEl = document.getElementById("foo"),
    myListener = new TapListener(function() { do stuff }, myEl, "fooName");
    // And to Kill
    myListener.kill();
于 2015-04-21T02:11:42.703 に答える