0

I am trying to create a custom context menu for my website. I have been unable to accomplish the first task, which would be capturing and preventing the default of a right click. I have tried the following:

function rclick(event) {
if (event==null) {event = window.event;}

var target = event.target != null ? event.target : event.srcElement;
        console.log(event.button);
if ((event.button == 2 || event.button==4 || (event.keyCode==17 && event.button ==0)) && target.tagName.toLowerCase() == 'a') {//1 and not internet explorer - middle
    event.preventDefault();
    var scrollTop = document.body.scrollTop ? document.body.scrollTop :
    document.documentElement.scrollTop;
    var scrollLeft = document.body.scrollLeft ? document.body.scrollLeft :
    document.documentElement.scrollLeft;
    document.getElementById("context").style.left = event.clientX + scrollLeft +'px';
    document.getElementById("context").style.top = event.clientY + scrollTop +'px';
    document.getElementById("context").style.display = 'block';
}

}

I have attached the event to all anchor elements with:

 $(document).ready(function(){$("a").bind("click",function() {rclick(event);});});

When I left-click on an a element, event.button gives me '0'. But when I right click, the browser context menu appears, and the event does not fire (the value will not appear in the console log. How can I capture the right click and prevent default?

----update----

I have added this line:

$(document).ready(function(){$('a').on("contextmenu", function(evt) {evt.preventDefault();});});

and that successfully prevented the context menu from appearing on right click on anchor elements. However, when I add these lines to my mousedown function:

 document.getElementById("conmen").style.left = event.clientX + scrollLeft +'px';                                     
 document.getElementById("conmen").style.top = event.clientY + scrollTop +'px';
 document.getElementById("conmen").style.display = 'block';

then the context menu appears on top of the custom context menu I have designed. Why would these lines make the browser context menu appear?

Jonathan Basile
  • 649
  • 1
  • 10
  • 20
  • 1
    I believe your question has been answered here: [Jquery/JS prevent right click menu in browsers](http://stackoverflow.com/questions/4920221/jquery-js-prevent-right-click-menu-in-browsers). – Lucas Fowler May 04 '15 at 20:48
  • possible duplicate of [Making custom right-click context menus for my web-app](http://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app) – Aeveus May 04 '15 at 20:56
  • Thanks Misty Fowler that was helpful - i missed that one. I managed to stop the event default with some code from there - but still couldnt capture the right click. @stefano has provided the missing piece. – Jonathan Basile May 04 '15 at 21:02

1 Answers1

1

You can try :

$(document).ready(function(){$("a").bind("mousedown",function(event) {

var btn = event.which;

if(btn == 1) {

    //Left Button

} else if (btn == 2) {

    //Middle Button

} else if (btn == 3) {

    //Right Button

}

})});

https://api.jquery.com/mousedown/

Stefano Vuerich
  • 996
  • 1
  • 7
  • 28
  • You can use a switch as well ;) – Stefano Vuerich May 04 '15 at 21:04
  • do you know if event.which will give the same values for left/middle/right across browsers and platforms - if so it's an immense improvement over event.button. – Jonathan Basile May 04 '15 at 21:04
  • 1
    as the documentation say : "Not all browsers support this property (Internet Explorer uses button instead), but jQuery normalizes the property so that it is safe to use in any browser". – Stefano Vuerich May 04 '15 at 21:06
  • Hi @stefano, sorry to trouble you again, but I described above a problem which has arisen with the mousedown function - can you understand why it is happening? – Jonathan Basile May 05 '15 at 00:36
  • 1
    Nevermind - I just needed to put those statements in the on contextmenu function instead of having a separate mousedown function – Jonathan Basile May 05 '15 at 01:10