Hammer 事件委托和主干视图的重用

Question

编辑

根据HammerGithub page，此错误是由于Manager 泄漏，应在2.0.5 版本中修复-此版本不是在线构建的，但可以自己构建。更多信息可以找到here

================================================ ======

原问题：

================================================ ======

我们使用 Backbone 和 Hammer 2,backbone hammer plugin 和 hammer jquery plugin.

问题

当使用 domEvents 并且只有 1 个 A 的副本时，它可以正常工作。

但是，当做类似的事情时

var first = new A();
var second = new A();

hammer listeners 不适用于第二个视图。

note: 将click 事件添加到上面的列表时，first 和second 视图都会触发点击。所以这与锤子事件和事件委托有关。

任何想法如何克服这个问题？

谢谢！

橡木

P.S 一些代码（可在堆栈溢出中运行）

这是一些代码示例。可以看出 - swiperight 仅适用于第一个视图，而不适用于第二个视图。代码使用touch emulator，所以也可以用鼠标查看。

A = Backbone.View.extend({

  hammerEvents: {

    "panstart .js-feed-btn": "_onPan",
    "panmove .js-feed-btn": "_onPan",
    "swiperight .js-feed-btn": "_onSwipeRight",
    "click .js-feed-btn-clickable": "_onClick"

  },

  hammerOptions: {
    //tap: true,
    domEvents: true
  },

  _onPan: function(e) {
    this.$el.find('.status-bar').html('panning... ' + this.cid);
    var view = this;
    if (this._animate) {
      return;
    }
    snabbt(e.target, {

      position: [e.originalEvent.gesture.deltaX / 2, 0, 0],
      duration: 100,
      callback: function() {
        this._animate = false;
      }

    })

  },

  _onSwipeRight: function(e) {
    snabbt(e.target, {
      position: [e.originalEvent.gesture.deltaX, 0, 0],

    }).then({
      position: [0, 0, 0]
    })


    this.$el.find('.status-bar').html('swiperight ' + this.cid);

  },


  _onClick: function() {
    this.$el.find('.status-bar').html('clicked ' + this.cid);
  },

  render: function() {
    this.$el.html('<div class="js-feed-btn">swipe me right</div><div class="js-feed-btn-clickable">clickme</div><section class="status-bar"></section>');
    return this;
  },

});


var first = new A();
var second = new A();

var parent = new Backbone.View();
parent.$el.append(first.render().$el)
parent.$el.append(second.render().$el)
  //$('.app').html(first.render().$el)
  //$('.app').append(second.render().$el)
$('.app').html(parent.$el)

div {
  min-height: 20px;
}
.status-bar {
  background-color: green;
  color: white;
}

<script src="https://rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>
<script>
  TouchEmulator();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://rawgit.com/jashkenas/underscore/master/underscore-min.js"></script>
<script src="https://rawgit.com/jashkenas/backbone/master/backbone-min.js"></script>
<script src="https://rawgit.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>
<script src="https://rawgit.com/wookiehangover/backbone.hammer/master/backbone.hammer.js"></script>
<script src="https://rawgit.com/daniel-lundin/snabbt.js/master/snabbt.js"></script>
<section id="main">
  <h3>Simple code</h3>
  <section class="app"></section>

</section>

Answer 1

我相信这是一个错误，并且我已经找到了有问题的代码。我将在下周提交错误报告和拉取请求（尽管我还不确定我的解决方案不会破坏其他东西）。

问题在于，Hammer 将所有侦听器添加到第一个元素（这会导致您为添加识别器的每个元素接收一个事件——添加 4 个press 侦听器，然后调用您的回调每按 4 次）。

我已经设法使 press 和 swipe 事件正常工作（通过 Chrome 进行触摸设备模拟，以及真正的 iPad 和 Nexus 7）。尚未测试其他事件。

我只是将第 946 行（Hammer 2.0.4）从

this.evTarget = TOUCH_TARGET_EVENTS;

到

this.evEl = TOUCH_TARGET_EVENTS;

请注意，您可能需要对第 878 行进行相同的更改，但我实际上还没有弄清楚 SingleTouchInput 类在何处、何时或是否使用过。

就像我说的，我不确定这是否是正确的解决方法，但它肯定是一种解决方法。如果我发现任何问题或不良副作用，我会及时报告。