Develop Reference

How to don't trigger right mouse click on Ctrl+LeftMouseClick in Firefox on MacOS?

I want to use a shortcut with Ctrl+LeftMouseClick in a React project.
It works fine on my Mac with Chrome but in Firefox the shortcut triggers the right mouse click (event.button = 2). I think this is because of the MacOS Right Click function with Ctrl+LeftMouse Click.
But why does it work in Chrome and how could I get it to work in Firefox, too?

Perhaps the following Firefox console test results in plain Javascript will help you devise an appropriate React test. I observe that I can capture the ctrl-click on the trackpad in Firefox with the following listener. I notice that evt.button is always 2 for me. However if I am using a trackpad, then I can distinguish between a two-finger-press triggered right-click by looking at evt.buttons. I did not test with a mouse but I would expect that a mouse may need to be treated differently. Also, beware that I have read that the ctrl-click masquerading as right-click might be a user controlled option.
document.body.addEventListener('contextmenu', (evt) => {
if (evt.ctrlKey && evt.buttons == 1) {
console.log("ctrl-click detected");
evt.preventDefault();
}
});

Change accesskey modifier keys in Firefox

I'm working on a website where each page has buttons, like "submit" and "cancel". Each of these buttons has an accesskey attribute. The submit button's accesskey attribute is set to S, and the cancel button's accesskey attribute is set to C.
Access keys are activated using different modifiers in different browsers. Internet Explorer, Safari, and Google Chrome use just the alt, while Firefox uses both the alt and the shift keys. As well, Firefox uses alt + s to open the history menu.
Answers to this question should not suggest changing settings in the browser's configuration as that would not be feasible on a production site.
How I change the modifier keys that Firefox uses for accesskey's to just alt, and prevent the history menu from opening?
I am working in Ubuntu 16.04.

You cannot—as far as I can tell—change the key combination required to activate an accesskey, but what you're trying to achieve does not require use of the accesskey attribute. You can listen for the keydown event directly.
Add a keydown event listener to the document. In the handler function check to see if the alt and s keys are pressed. If they are—and no other modifier keys are pressed—prevent the default action of the event, then trigger a click event on the submit button.Triggering the click event on the submit button will in turn trigger the submit event listener, whereas triggering the submit event on the form directly may not.
const submit = document.querySelector('#submit')
document.addEventListener('keydown', e => {
// If the only modifier key is the alt key, and the s key is pressed
if(!e.metaKey && !e.ctrlKey && !e.shiftKey && e.altKey && e.key === 's') {
e.preventDefault() // Prevent the mozilla history menu from opening
submit.click() // Trigger the form submission
}
})
<form action=""><button type="submit" id="submit"><u>S</u>ubmit</button></form>
Notes:
1. Though this works in the current stable version of Firefox, I have not tested other versions
2. This example uses language features introduced in the 2015 version of The ECMAScript Language Specification. These features are not required to achieve the desired effect, but make the code easier to read. If you need to support older browsers, you can use var instead of const, and a standard function instead of the fat arrow function.
3. Unfortunately—due to sandboxing—the Stack Overflow snippet feature does not work for this example, see this example on JSBin instead

If you want deep knowledge about it then try this article has more info: http://kb.mozillazine.org/Ui.key.contentAccess
If you find that you can't get used to the "in-tab" preferences dialog, there is a preference to return to the old style dialog:
In a new tab, type or paste about:config in the address bar and
press Enter. Click the button promising to be careful.
In the search box above the list, type or paste pref and pause while
the list is filtered
Double-click the browser.preferences.inContent preference to switch
it from true to false
Note: I don't know whether that will be in Firefox forever or is a transitional feature.

Simulating keyboard press in a way that isn't deprecated?

I am looking for a way to simulate a keyboard press (like the titled suggests). I have looked around and I have found mainly these 2 SO questions:
Is it possible to simulate key press events programmatically?
Simulate keypress without jquery
The issue with those are that they both use the KeyboardEvent.initKeyboardEvent() event which according to MDN it is deprecated. Is there a different way of accomplishing the same thing without that deprecated function?
I would like to know this because I am creating a script for YouTube using Chrome's TamperMonkey extension. This script will, when [space] is pressed, trigger K. K is YouTube's toggle play/pause button. I have the [space] listener working perfectly with the code below:
document.addEventListener("keydown", function(e) {
if(e.keyCode==32) {
e.preventDefault();
}
}, false);
Also I am really looking for a pure JavaScript approach.

If you do this with jQuery you build your event.
https://stackoverflow.com/a/3368599/3257830
If you want to create an event, you initialize the object then dispatch the event.
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
document.addEventListener("keypress", function(e) {
alert(e.which);
});
var e = new Event("keypress");
e.which = 65;
e.keyCode = 65;
document.dispatchEvent(e);
<p id="r">Alerts on event</p>

Capturing the TAB key in Gmail and other sites that blocks the capture

Using preventDefault() on a keydown works for all keys except the tab key on certain sites like Gmail.
Why is this the case? What is special about the tab key -- shouldn't it be treated the same as any other keypress?
How can I block the tab key from cycling through elements in Gmail?
Here is the Greasemonkey (JS with jQuery) code I'm currently using:
$("body.editable.LW-avf").keydown(function(event){
if(event.which == 9){
event.preventDefault();
}
});
Anything other than tab (e.g. a) works - the keypress is stopped. How can I capture the tab key?

Gmail is probably already using preventDefault to redefine the event handler, since it is not using tabindex. In that case, you would need to override the definition of preventDefault:
Event.prototype.preventDefault = function(){}

onkeyup on firing for modifier keys

I don't appear to be able to use the onkeyup event to detect when modifier keys, specifically the Alt key, is being released, reliably. Sometimes it works, sometimes it doesn't. Most of the time it doesn't, though.
My current code is:
document.documentElement.onkeyup = function(e) {
e = e || window.event;
if( !e.altKey) {
// do stuff here
document.documentElement.onkeyup = null;
}
}
Possibly related to Prevent default event action not working...? as I'm working in IE9 and the File menu pops up. I do dismiss the menu before attempting to trigger the event, though.

Not directly an answer to your question, but this might help you. It is a very detailed description on how browsers manage keydown/press/up.

I believe that typically a browsers key events take precedence over page defined ones. However, I would suggest using jQuery because I was just testing in IE9 and they seem to have overcome that problem.
Edit: While this seems to capture the event, I don't think it's possible to prevent IE from performing it's own events.