CODEWITHSUNDEEP
javascriptjquery
Mehdi Souregi
Mehdi Souregi

Reputation: 3265

PreventDefault with right click on an image

Is it possible to fire document right click event on an image ?

That's what I've done so far, I can only track right click event on my Image

<script type="text/javascript">
    $("#myImage").mousedown(function (event) {
        if (event.which == 3) {
           //I need Some code to fire Document right click event (or maybe a different method)
        }
    });
</script>

Thanks for your help

Edit1: What I want exactly is when i right on click on my image, i want to show a menu, not the image right click menu, but the document right click menu It is like the image is not there or disabled, thanks again for your help :)

Edit2: What I did till now is disable right click event with preventDefault, now I need to display the menu:

<script type="text/javascript">
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
//Need to display the menu
}, false);
</script>

Edit3: It worked thanks, I created my own menu, ofc it would have been great If I had the default menu but this one is perfect too :)

<script type="text/javascript">
    $(document).bind("contextmenu", function (event) {
        event.preventDefault();
        $(".custom-menu").toggle(100).
  css({
      top: event.pageY + "px",
      left: event.pageX + "px"
  });
    });
   //To hide the menu if left click event is fired
    $(document).bind("mousedown", function () {
        $(".custom-menu").hide(100);
    });
</script>
//New Menu
<ul class='custom-menu'>
  <a>Back</a><br />
  <a>Refresh</a><br />
  <a>Save</a><br />
</ul>
<style type="text/css">
.custom-menu {
  position: absolute;
  background-color:#EEE;
  overflow: hidden;
  width: 100px;
  }
</style>

Upvotes: 1

Views: 768

Answers (1)

nmaier
nmaier

Reputation: 33192

event.which is actually the wrong thing to check...

Use event.button == 2. See the MouseEvent documentation.

Or use contextmenu event, as @MarshallOfSound suggested (but subsequently removed as an answer), but be aware that it might also fire if the user invoked the contextmenu by another method than right-clicking, e.g. left-click + CTRL on OSX. And it is pretty recent HTML5 stuff, so it might not work with older browsers.

Edit After your edit it appears contextmenu might be better suited for your needs. Also, event.preventDefault is your friend. ;)

Upvotes: 4

Related Questions