Right click acts like a left click on the event

Question

I have this code:

document.getElementById("1").oncontextmenu = function() {
  return false
}

It disables the little window that shows after a right click (only on the button/image).

On my code (https://jsfiddle.net/nnuyguat/) everything is working fine, except for when I do a right click on the image as it triggers the left click event and changes the image untill I move the mouse.

Another related problem is if I press left click without releasing and then right click (releasing the right button), it will also change the image.

I need to prevent the image changing with right clicks. It should work as the closing button of the browser (except it's another images and it doesn't close anything).

Possible duplicate of [Is right click a Javascript event?](http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event) — Francisco Romero, May 27 '16 at 14:01
@Error404 It's not a duplication as in that other question doesn't have the answer for this specific problem and it doesn't even have a accepted answer. — JavaScript, May 27 '16 at 14:03
But it has the solution to handle the right click event as you want in your question. Of course, never it will be always two issues equals (or at least it is very strange that two general issues will be equals, maybe related). If you can handle right click, then you can avoid it also. — Francisco Romero, May 27 '16 at 14:10

bladeedg · Answer 1 · 2016-05-27T14:08:14.817

2

You could use event.button to check which button is pressed because event.button returns a number which indicates which mouse button was pressed.

Source

Edit:

if (event.button === 2){
    // run your function
}

That should be correct, as I have never used this before.

edited May 27 '16 at 14:08

answered May 27 '16 at 14:04

bladeedg

61
1
7

Could you support it with some code? An example or changing directly on my code. – JavaScript May 27 '16 at 14:05

score 1 · Accepted Answer · answered May 27 '16 at 14:09

The right click event is not triggering a left click. It is just activating your object. Your image says "click" but it is inaccurate. It should say "Active".

Second, a number is NOT a valid ID. So rename your div from id="1" to id="one" or similar.

Finally, try with this code, instead of yours:

document.getElementById("one").addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('hello from right click');
    return false;
}, false);

See https://jsfiddle.net/nnuyguat/3/

I will change the images and the id. The code you provided is enough for me to get it working, thanks! — JavaScript, May 27 '16 at 14:12

score 1 · Answer 3 · edited May 23 '17 at 11:44

1

The issue with your image changing on right click is not related to your javascript, but to your css. The :active CSS pseudo-class matches when an element is being activated by the user. According to the specs this should only be when the element is activated with the primary mouse button, but it seems like most browsers do not implement the spec correctly. See this question for info.

A work around maybe to abandon the :active pseudo-class, and set up a function to change the content explicitly on left click.

edited May 23 '17 at 11:44

Community

1
1

answered May 27 '16 at 14:19

user5219763

1,284
12
19

Is it possible to temporally abandon/remove the `:active` when right clicking or, on right click, change the image to the rigth one? – JavaScript May 27 '16 at 14:25

score 0 · Answer 4 · answered May 27 '16 at 14:02

0

Its because of the oncontextmenu event. Remove it and it will work

answered May 27 '16 at 14:02

Gordy Colonna

54
1
9

That's not the problem, if I remove it it still doesn't work. The problem is the event that makes the image change on click is not made for left click, it's made for any click. – JavaScript May 27 '16 at 14:04

Right click acts like a left click on the event

4 Answers4