Geek Answers Handbook

JavaScript: right-clicking and disabling menus only within a specific element

I encoded a jquery script where there is a small grid on the screen, and using drag and drop, users can put tiles in the grid (snaps in place). Currently, if you hover over a tile, it disappears into the options for rotation, but I would prefer if you could right-click to rotate (which makes it more natural). I understand that the right-click blocking mouse frown completely, so I was wondering if it is only possible in a specific element and then capture this event, do something in JS and disable the context menu? - works in every browser.

On the side of the note, I'm currently using jQuery for effects and custom javascript for drag and drop, is it worth looking at the jQuery plugin for drag and drop?

Many thanks,

+6
javascript jquery drag-and-drop right-click
source share
3 answers

To capture the right click you can use this jquery:

$('#gridID').bind('contextmenu', function(e) { // do stuff here instead of normal context menu return false; });

This works in chrome, firefox and safari. Not tested IE . Works in IE too. Just beware, this doesn't seem to work in Opera. Therefore, if you can live with it ...

+12
source share

I am not a fan of using the right mouse button on web pages. However, if you really want to do this, you can grab the right mouse button, as described here . You can block the right mouse button (in other words, return false to the event handler) conditionally if the mouse is above the grid cells.

As for your bonus question: jquery ui has a drag and drop function . This is probably easier to use than creating your own.

0
source share

"is it worth looking at the jQuery drag and drop plugin?"

Only if you do not intend to use the application on the iPhone OS with safari, that is, including the iPad, see the Safari Web Content Guide: event handling

0
source share

More articles:


All Articles