Chris Chris - 1 year ago 77
Javascript Question

How do I attach a right click event to a draggable div

This is the problem I am having. I need to attach some kind of handle to a draggable div.

What I need to do is capture the right mouse button every time that I right click on div within the parent.

This is my child creation code. This code works fine and I can create multiple div without a problem.

var smallBlock = $('<div class="SmallBlock"></div>').appendTo("#canvas");
smallBlock..draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 125, left: 150}})
smallBlock.append('<div class="article_title fontCenter fontBold font32">Article Title</div>')
smallBlock.append('<div class="article_Image"><img style="width: 250px;" src="<? echo $image1 ?>"></div>')
smallBlock.append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>')

And this is the mouse click code.

<script type="text/javascript">

function getRightClick()
// check for right mouse pressed

$('#canvas').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
case 2:
alert('Middle mouse button pressed');
case 3:
alert('Right mouse button pressed');
alert('You have a strange mouse');


I have no idea how to make the get the div to recognize that a right mouse was clicked over it.

BTW, there are other classes of divs within the parent which I need to detect; so a more general solution might be better.

Answer Source

you could add this to the context id element:

oncontextmenu="alert('right click on element');return false;

or perhaps this:

jQuery('#yourDIVId').mousedown(function(event) {
   var rightclk = false;
   if (event.which) rightclick = (event.which == 3);
     if(rightclk == true){