How to handle long click and right click events in Backbone JS

Question

We can manage click and double click events like below:

events: {
    "click .tree-toggler": "toggletree",
    "dblclick .doubleclick" : "doubleclickFunc"
  },

 toggletree: function(e){
     //code
  },
  doubleclickFunc : function(e){
      //code
  }

But I want to manage right click event and Long click event. How to handle them?

I guess there is no "longclick" event defined, so you will have to write a custom event handler which can be created using the mousedown and mouseup events in combination. As for the right click take a look at [this](http://stackoverflow.com/questions/4235426/how-can-i-capture-the-right-click-event-in-javascript) — Phoenix, May 27 '13 at 12:01
@Phoenix - Yeah I have searched the doc and so many sites but couldn't find the longclick event. Have to write custom event handler. — Cindrella, May 27 '13 at 12:06
Take a look at the 6th example in the [`$.on()` reference page](http://api.jquery.com/on/) — Phoenix, May 27 '13 at 12:19

score 12 · Accepted Answer · answered May 27 '13 at 11:51

12

I don't know about the "long click" event (I didn't even know there was one and can't find some doc on it), but anyway. Backbone uses jQuery's on method to bind your events to the DOM. That means anything that works with on will work with Backbone.View.events (unfortunately there are some limits to the selector you specify, but apart from that).

Try:

events: {
  contextmenu: 'onRightClick'
},
onRightClick: function() {
  alert('it works!');
}

answered May 27 '13 at 11:51

Loamhoof

8,293
27
30

3

be sure to call event.preventDefault() to stop the context menu from popping up! – jakee May 27 '13 at 11:57
@jakee depends on what he wants to do, so I'd rather not say anything about it and consider that OP knows what he's doing anyway :) – Loamhoof May 27 '13 at 12:00
Right click event is working perfectly. +1 for the right click event. – Cindrella May 27 '13 at 12:05

jakee · Answer 2 · 2013-05-27T14:12:48.290

You can use the contextmenu event to detect right clicks as described in the earlier answer. Another way to detect clicks for the right mouse button is jquery's event.which:

clickTree: function(e) {
  if (event.which === 3) {
    // handle right clicks
    this.showtreemenu(e);
    return;
  }
  // handle left clicks
  this.toggletree(e);
}

For long clicks, aka measuring click duration, use mouseup and mousedown:

events: {
  'mousedown .measure-click-duration': 'clickStarted',
  'mouseup .measure-click-duration': 'clickEnded'
},

clickStarted: function(e) {
  this.clickStartTime = e.timeStamp;
},

clickEnded: function(e) {
  var clickDuration = e.timeStamp - this.clickStarted;
  if (clickDuration > 1000) {
    this.longClick(e);
  }
}

I made a fiddle demonstrating contextmenu for right clicks and the click duration described above.

How to handle long click and right click events in Backbone JS

2 Answers2