Develop Reference

Right click acts like a left click on the event

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).

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.

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/

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.

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

event.button not working properly in Chrome

I'm using JQuery event object's button property to get whether the left button of the mouse was clicked during a mouseout event:
$("#foo").on("mouseout", function(event){
if (event.button === "0"){
// do code
}
});
According to the specification button property gets the string value "0" if the left button was clicked, and it gets the value "-1" if none of the buttons.
My problem is that in Chrome (I haven't tried it on other browser yet) I get the value "0" whether left button is being clicked or none of the buttons are being clicked. If I clicked the right button, I get the proper value ("2") as in the specification. So I only have problem if none of the buttons are being clicked (it should give the "-1" value, but it gives the "0" value).
Do you have any clue?
I know there is a buttons (plural!) property two, but I use TypeScript and it cannot recognize this proprety for JQueryEventObject class. However in JavaScript buttons property works well for me.

I'm using JQuery event object's button property to get whether the left button of the mouse was clicked during a mouseout event.
But you are using a mouse event which is not in the list mouseout, but docs # MDN says this:
The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.

How to feature-detect event.which in mousemove listeners?

Chrome seems to have event.which === 1 in a mousemove listener if the left mouse button is currently depressed at the time of the move event.
But Firefox doesn't; it only sets event.which in mousedown and mouseup. I don't know about other browsers.
Can anyone think of a good way to feature-detect this behaviour?
Note: I know you can hack it using mousedown and mouseup listeners to update a mouseIsPressed variable, but this isn't a good hack in my situation (a drag interaction inside an iframed window, ie no way to catch the mouseup if it happens outside the iframe), so I want to use the native event.which where available.

DOM Level 3 defines MouseEvent#buttons, which Firefox supports. From the MDN article on mousemove:
The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2).

onmouseup not working in safari

This is the example which I got from w3schools, where I am getting weird behaviour for safari browser alone.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown
Safari:
If we left-click on top of paragraph, the text turns red color and when I leave it , it turns Green color.
That's fine.
Now, I am right-clicking on top of the paragraph.Now the text color turns Red and when I leave it, it NEVER turns to green color. i.e onmouseup is not working in safari if we are using right click. Can anyone tell me why ?
Any solution for this ?

In safari, it seems like the focus is given to the context menu when right-clicking, so the context menu receives the mouseup event rather than the P element. As for a solution, you can detect the mouse button to prevent it to behave on the right click. Right click events are
messy unless you want to handle a custom context menu.
If you want the mouseup event to work in safari when fired with a right click, you will need to disable the context menu by adding this attribute to the P element:
oncontextmenu="return false">
It is also possible to detect if the left click fired the event (which is usually the button you want to handle):
function mouse_handler(event) {
var evt=window.event||event;
var button = evt.which || evt.button;
if (button == 1) { // if left mouse button
// handle the event
}
}
In the example from w3schools, it would lead to something like this:
function myFunction(elmnt,clr,event)
{
var evt=window.event||event;
var button = evt.which || evt.button;
if (button == 1) { // if left mouse button
elmnt.style.color=clr;
}
}
Then passing the event in the function call:
<p onmousedown="myFunction(this,'red',event)" onmouseup="myFunction(this,'green',event)">

Check if mouse button is down while hovering?

I have a grid of boxes that a user interacts with on a website. If they click a box, it changes color. There are quite a lot of boxes and I'd like it to be less tedious, so it would be nice to have the functionality be: if mouse button is down and you hover the box, it changes states. Any thoughts?

You can use the buttons property on the event passed to the hover callback to check what mouse buttons were pressed when the event was triggered.
For example, to detect whether the left button was pressed when an element is entered with the mouse, you could use:
myElement.addEventListener("mouseover", function(e){
if(e.buttons == 1 || e.buttons == 3){
//do some stuff
}
})
Here is a demonstration of this idea: http://jsfiddle.net/Ah6pw/
Hold down the left mouse button and move your mouse through different list items.

I found something simmilar. Clicking the objects in some space and then little interaction.
http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html (look for inspiration into the code)
Also these links could be usefull for you
jQuery is mousedown on mouseover
Detect left mouse button press
http://unixpapa.com/js/mouse.html

See onmousedown & onmouseup events.