锤子事件委托和骨干视图的重用

Question

修改

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

找到

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

原始问题：

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

我们正在使用Backbone Hammer 2，backbone hammer plugin和。{ hammer jquery plugin

问题

使用domEvents时，只有A个var first = new A(); var second = new A(); 视图可以正常使用。

但是，在做某事时

note

锤子监听器不适用于第二个视图。

click： 将first事件添加到上面的列表时，会在second和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)个视图中触发点击。所以这是锤子事件和事件代表团的事情。

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

谢谢！

橡树

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我相信这是一个错误，我已经找到了有问题的代码。我将在下周提交错误报告并提出请求（虽然我还不确定我的解决方案是否会破坏其他内容）。

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

我设法让press和swipe个活动有效（通过Chrome进行触摸设备模拟，以及正版iPad和Nexus 7）。 Haven尚未测试其他事件。

我只是从

改变了第946行（Hammer 2.0.4）

this.evTarget = TOUCH_TARGET_EVENTS;

到

this.evEl = TOUCH_TARGET_EVENTS;

请注意，您可能需要对第878行进行相同的更改，但我实际上并未确定何时，何时或是否曾使用SingleTouchInput类。

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