javascript - Hammer 事件委托(delegate)和主干 View 的重用

Question

编辑

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

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

原始问题:

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

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

问题

当使用 domEvents 并且只有一份 A View 时，它工作正常。

但是，当做类似的事情时

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

锤子监听器在第二个 View 上不起作用。

注意: 将 click 事件添加到上面的列表时，将在 first 和 second View 上触发点击。所以这与锤子事件和事件委托(delegate)有关。

有什么办法可以解决这个问题吗？

谢谢!

橡木

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

这是一些代码示例。可以看出 - swiperight 仅适用于第一个 View ，而不适用于第二个 View 。代码使用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 类在何处、何时或是否被使用过。

就像我说的，我不确定这是一个正确的修复，但它肯定是一个解决方法。如果我发现任何问题或不良副作用，我会反馈。