Develop Reference

Prevent tab key from selecting URL in Javascript/Jquery

I'm making a game, and there's a leaderboard. I want the user to be able to toggle the leaderboard by hitting the TAB key. Here is my code:
keysPressed = {};
if(keysPressed[KEY_TAB]){
if(leaderboard.style.display == 'none'){
$(leaderboard).fadeIn(100);
} else {
$(leaderboard).fadeOut(100);
}
keysPressed[KEY_TAB] = false;
}
document.addEventListener('keydown', (event) => {
keysPressed[event.key.toLowerCase()] = true;
}, false);
document.addEventListener('keyup', (event) => {
keysPressed[event.key.toLowerCase()] = false;
}, false);
Note: leaderboard is just document.getElementById('leaderboard')
This all works fine, but whenever I hit the tab key, the webpage (I'm using Chrome) automatically selects/deselects the URL bar. Is there a way I can prevent the TAB key from doing this, or do I need to switch to a different key? Here is an screenshot demonstrating my problem:
JavaScript is prefered, since I am rather new to jQuery, but I am willing to go either.
Thanks in advance~

Use Event.preventDefault()
From MDN :
The preventDefault() method of the Event interface tells the user
agent that if the event does not get explicitly handled, its default
action should not be taken as it normally would be.
The event continues to propagate as usual, unless one of its event
listeners calls stopPropagation() or stopImmediatePropagation(),
either of which terminates propagation at once.
As noted below, calling preventDefault() for a non-cancelable event,
such as one dispatched via EventTarget.dispatchEvent(), without
specifying cancelable: true has no effect.
document.addEventListener('keydown', (event) => {
if (event.key == "Tab") {
event.preventDefault();
}
}, false);

jQuery: preventDefault() not working on anchor link tag (tried many methods!)

I'm trying to prevent anchor link from sending to another page but it's not actually working, I don't even know whyyy. I used preventDefault before and it works every time but this time I don't know what's going on.
Yes i've seen this question on stackoverflow and tried all methods but it's still not working
HTML Code:
<h2><a id="donta" href="/services.html">Eco Ideas</a></h2>
jQuery Code:
$('#donta').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
alert(event.target.tagName); //yes it alerts me 'A'
if(event.isDefaultPrevented()){
alert('Prevented!'); //yes it shows this alert but still send me to that link
event.stopImmediatePropagation();
event.returnValue = false;
}else{
// NOPE, it doesn't show this "ELSE" part...means the below alert doesn't show up...means according to browser or jQuery it is now PREVENTED
alert('Not prevented but trying to prevent now');
event.returnValue = false;
}
return false;
});
You can see I tried all methods, but still it send me to that damn link!
Thanks in advance, because I know you guys will find a way :)

There are lot of event-listeners on the link. And 2 of them are listening click event. It seems like while one prevent link, other one don't.
I think trouble may be in this function, because it triggers:
function end(e) {
clearTimeout(resetTimer);
resetTimer = setTimeout(function() {
w.tapHandling = false;
cancel = false;
}, 1000);
// make sure no modifiers are present. thx http://www.jacklmoore.com/notes/click-events/
if ((e.which && e.which > 1) || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey) {
return;
}
e.preventDefault();
// this part prevents a double callback from touch and mouse on the same tap
// if a scroll happened between touchstart and touchend
if (cancel || w.tapHandling && w.tapHandling !== e.type) {
cancel = false;
return;
}
w.tapHandling = e.type;
trigger(e);
}

I usually not set href attribute with value and just set href="javascript:void(0)" when I won't that link was redirected and will set action in that link.
Maybe will work for you too.

Why is stopPropagation required for mousewheel click

In the content script of my Firefox Addon I have the following code:
window.addEventListener('click', function(event) {
event.preventDefault();
var t = event.target;
var nearestATag = t.nodeName === 'A'
? t
: findParentByTagName(t, 'A');
if (nearestATag !== undefined) {
self.port.emit('click-link', nearestATag.getAttribute('href'));
}
});
I want to prevent the URL from opening in the panel where the script is running and open it in the new browser's tab instead.
It works perfectly in case of a left mouse click, but doesn't work as expected in case of mousewheel click -- URL opens twice, so it seems that preventDefault doesn't do anything here.
Adding event.stopPropagation(); after event.stopPropagation(); works but I don't really understand why.
So can you help me understand why?

Disable middle mouse click

I need your help in one question that how to disable the middle mouse click on any link to open a new tab in IE 7,8,9.
I have tried many thing like
return false;
e.cancelBubble = true;e.returnValue = false;
But not able to stop that feature of IE to open New tab.But if i am putting alert message e
if (event.button == 4)
{
alert("shashank");
}
I am able to stop to open new tab .But I don't want to use alert message.

None of the answers above worked for me. According to MDN the auxclick event is the proper way to do this.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});

You can try with following:
$(document).mousedown(function(e){
if(e.which === 2 ){
alert("middle click");
return false; // Or e.preventDefault()
}
});
Demo

Disable Firefox's silly right click context menu

I am making an HTML 5 game which requires the use of right click to control the player.
I have been able to disable the right click context menu by doing:
<body oncontextmenu="return(false);">
Then it came to my attention that if you hold shift and right click, a context menu still opens in Firefox!
So I disabled that by adding this JS as well:
document.onclick = function(e) { if(e.button == 2 || e.button == 3) { e.preventDefault(); e.stopPropagation(); return(false); } };
However, if you hold shift, and then double right click in Firefox it still opens!
Please tell me how to disable this bloody thing once and for all (I'm even willing to revert to some obscure, hacky, and unpractical solution, as long as it works).

You will never be able to entirely disable the context menu in all cases, as firefox has a setting that allows the user to tell the browser to ignore such hijinx as you are trying to pull.
Note: I'm on a mac, but this setting is in pretty uch the same place over all platforms.
That being said, try event.preventDefault() (see Vikash Madhow's comment on this other SO question:
How to disable right-click context-menu in javascript)

There is actually example in official documentation that blocks directly context menu event:
document.oncontextmenu = function () { // Use document as opposed to window for IE8 compatibility
return false;
};
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9
e.preventDefault();
}, false);

document.ondblclick = function(e) {
if(e.button == 2 || e.button == 3) {
e.preventDefault();
e.stopPropagation();
return(false);
}
};