Creating a custom context menu on right click. jquery

Asked Apr 28 '15 at 03:31

Active Apr 28 '15 at 04:01

Viewed 1,277 times

I have two columns, and two inputs, made to create new content that will be placed in any of those columns.

One input is to enter the content of the div (and assign the class="item"), the second input is for entering the class for that content (for styling).

So, I want to be able to open a custom context menu when I right-click on any of the items I have created. (Bit of a problem to me). With jQuery.

Can you help come through this, please.

html

<div id="ctxtmen" class="invisible">
    <ul>
        <li>Edit</li>        
    </ul>
</div>

And the jQuery.js

$(".item").mousedown(function(e){ 

  if( e.which == 3 ) { 
    $("#ctxtmen").removeClass("invisible").css({top: event.pageY + "px", left: event.pageX + "px"});
  }

$(document).click(function(){

  $("#ctxtmen").addClass("invisible");
  if( e.which == 2 ){
    $("#ctxtmen").addClass("invisible");
  }
});

$(document).bind("contextmenu", function(x){

  if (!$("#ctxtmen").hasClass("invisible")) {
    x.preventDefault();    
  }   
});  

});

Check out the: jsFiddle

edited Apr 28 '15 at 04:01

asked Apr 28 '15 at 03:31

FYP 89

possible duplicate of [How can I capture the right-click event in JavaScript?](http://stackoverflow.com/questions/4235426/how-can-i-capture-the-right-click-event-in-javascript) – DLeh Apr 28 '15 at 03:33
http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery – Mohamed-Yousef Apr 28 '15 at 03:35
Checking them out, thanks. – FYP 89 Apr 28 '15 at 03:36
1

You are adding a lot event handlers inside another handler which is not the right way – Arun P Johny Apr 28 '15 at 03:37
The `click` and `bind` events should be out of `mousedown` – Shaunak D Apr 28 '15 at 03:37
Check out this article: [5 jQuery Right Click Context Menu Plugins](http://www.sitepoint.com/right-click-context-menu-plugins/) – nicolaus-hee Apr 28 '15 at 05:14

Creating a custom context menu on right click. jquery

0 Answers0