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

编辑

根据Hammer Github 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();

锤听者在第二个视图上不起作用.

注意：
将点击事件添加到上面的列表中时,在第一视图和第二视图上都会触发该点击.所以这与锤子事件和事件委托有关.

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

谢谢！

橡木

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>

解决方法:

我相信这是一个错误,并且我已经找到了有问题的代码.我将在下周提交错误报告并提出请求(尽管我不确定我的解决方案不会破坏其他功能).

问题在于Hammer会将所有侦听器添加到第一个元素(顺便导致您为添加了识别器的每个元素接收一个事件-添加4个按侦听器,并且每次按4次调用回调).

我设法使按下和滑动事件生效(通过Chrome进行触摸设备仿真,以及正版iPad和Nexus 7).尚未测试其他事件.

我只是将(Hammer 2.0.4的)946行更改为

this.evTarget = TOUCH_TARGET_EVENTS;

至

this.evEl = TOUCH_TARGET_EVENTS;

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

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

标签：backbone-views,backbone-events,hammer-js,backbone-js,javascript
来源： https://codeday.me/bug/20191120/2045820.html