ansaurus

Question

How can I fire an event when I right click on a div inside a canvas with jQuery

Answer 1

+1 A:

Have you tried the jquery.rightClick plugin? Seems to work on a quick test I did:

http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/

$('.node').rightClick(function() {

    console.log('right click');

});

Looks like it's pretty old, but then again there's not much code there. I think it may need a little updating, but not much.

patrick dw 2010-06-24 20:03:29

I tried this but it didn't work for the "node" divs in the mycanvas-label div. I put a div at the bottom of the page that also has the class "node" and the right click works for that one.

Dan 2010-06-24 20:21:03

@Dan - I copied and pasted your CSS, HTML and the code with the `rightClick` call, and it works for me on the `.node` elements that are under `.mycanvas-label`. Tested in Firefox, Safari, IE7 and IE8.

patrick dw 2010-06-24 20:43:17

@Dan - Are the `.node` elements inside `.mycanvas-label` being loaded via the call to `$.getJSON()`? If so, it won't work unless you call `rightClick` on them inside the `$.getJSON()` callback.

patrick dw 2010-06-24 20:50:39

I wonder if it has something to do with the way the HTML is generated by jit. The interesting thing is the $(".node").live("click", ... works on those same nodes.Any ideas how I can do with with plain javascript on my own?

Dan 2010-06-24 20:53:49

Putting the rightClick in the $.getJSON() callback isn't working either.

Dan 2010-06-24 20:57:47

@Dan - When I mentioned putting the rightClick inside the `$.getJSON()`, I meant calling it on the specific elements that were being created. I suppose that would have actually been in your `init()` function. The solution you chose will work fine (it is basically right out of the plugin), just be aware that it seems to be disabling the contextual menu for the entire document. Ultimately, when you create elements dynamically, you'll generally need to attach any plugin behavior to them in the same code that created the elements. :o)

patrick dw 2010-06-24 21:55:49

Answer 2

+1 A:

Try this:

$(document).ready(function(){ 
    $(document)[0].oncontextmenu = function() {return false;} 

    $("#infovis").delegate('.node','mousedown',function(e){ 
      if( e.button == 2 ) { 
         e.stopPropagation()
         alert('Right mouse button!'); 
         return false; 
       } else { 
         return true; 
        } 

    }); 
});

I assume #infovis is visible from the outset and you are using javascript to populate that div with .node divs. Thus, you want to use event delegation, so you are not binding to each node, but a parent node instead. This makes your code faster, even if you have 1000 .nodes. Also, you don't need to put the bindings in a callback.

We delegate to mousedown and capture the event if button == 2 (the right click button).

Also you disable default right click behavior by stopping the contextmenu event.

Let me know if that works for you.

resopollution 2010-06-24 21:19:35

Your recommendation worked for me.

Dan 2010-06-24 21:37:41

ansaurus

tags:

views:

answers:

How can I fire an event when I right click on a div inside a canvas with jQuery

related questions