Delegation of hammer events and reuse of the spine

Question

Edit

According to the Hammer Github page this error was caused by Manager leaks and should be fixed in version 2.0.5 This version is not built on the network, but you can build it yourself. More information can be found here.

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

The original question:

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

We are using Backbone with Hammer 2 , a milk hammer plugin and a jquery hammer plugin .

Problem

when working with domEvents and only 1 copy A viewing it works fine.

But by doing something like

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

hammer listeners do not work in the second view.

note : When you add the click event to the list above, the click fires on both the first and second views. So, this is something with dairy events and events.

Any ideas how to overcome this problem?

Thanks!

Oak

PS Some code (executed on stack overflow)

Here is a sample code. As you can see, swiperight only works at first glance, not at the second. The code uses a touch emulator , so it can also be checked with the mouse.

 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.imtqy.com/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

I believe this is a mistake and I tracked the violating code. I will write a bug report and pull out a request next week (although I'm still not sure that my solution will not break something else).

The problem is that Hammer adds all listeners to the very first element (which, however, leads to receiving your event for each element to which you add a recognizer, adds 4 press listeners, and your callback is called 4 times for each click )

I managed to create press and swipe events (with emulation of the touch device via Chrome, as well as with an authentic iPad and Nexus 7). I have not checked other events yet.

I just changed line 946 (from Hammer 2.0.4) from

 this.evTarget = TOUCH_TARGET_EVENTS; 

to

 this.evEl = TOUCH_TARGET_EVENTS; 

Note that you may need to make the same change to line 878, but I have not really figured out where, when or when the SingleTouchInput class is SingleTouchInput .

As I said, I'm not sure if this is the right solution, but it is certainly a workaround. I will report back if I find any problems or unwanted side effects.