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

restore event to default action in jquery after event.prenventdefault

I used this answer to disable arrow and pgdown and pgup keys actions (scrolling). but I need to set actions of this keys to default (scrolling) after event.preventDefault() called in my jquery code.
How can I do this.

Hard to answer without better specifics, but if I understand what you have properly if you have something you can track state with you can preventDefault when you wish to block this behavior and let it fall through otherwise:
Psudocode:
var state = {
blockArrows: true;
}
$('#my_widget').keydown(function(e) {
if(state.blockArrows) {
e.preventDefault();
}
// ...else allow the event to do its normal thing....///
});

To reverse preventDefault(), you need to unbind the original action and then re-call it.
$(document).keydown(function(e) {
e.preventDefault()
// Do stuff until you need to recall the default action
$(this).unbind('keydown').keydown()
})
How to unbind a listener that is calling event.preventDefault() (using jQuery)?

Why can't I use addEventListener to stop contextmenu event?

I want to prohibit the right mouse button. But I find that if I write this:
document.addEventListener('contextmenu', function(event) {
return false;
}, false);
It will not work, the event will still work.
But if I write it like this,
document.oncontextmenu = function() {
return false;
}
The right mouse button will not work.
I wish to know why I can't use addEventListener to stop the event contextmenu.

As stated in "Preventing the Browser's Default Action", the return of false value is not enough for preventing default action. You need to call preventDefault() method on Event object:
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
}, true);
DEMO

I believe you need to useCapture, try passing true as the third parameter to
document.addEventListener() and see if that doesn't solve it for you.

Phonegap Touch Event Handling

I am trying to make a calculator using phonegap - but I am running into problems in adding the touch event. It does not show anything on the display. kindly see if there are problems in the code. and suggest me a solution.
**I have added the onTouch event to all the numbers and math operators buttons.
function onload(){
document.getElementById("display").addEventListener('onTouch',insert,false);
document.getElementById("clear").addEventListener('onClear', clear, false);
document.getElementById("equal")addEventListener('onEqual', evaluate,false);
}
function clear(){
document.getElementById("display").value="";
return false;
}
function insert(val){
document.getElementById("display").value+=val;
}
function evaluate(){
try
{
ans= eval(document.getElementById("display").value);
document.getElementById("display")=ans;
return false;
}
catch
{
document.getElementById("display").value="Error";
return false;
}
}

I am not sure about the onTouch event. Does that exist at all?
I would suggest to try either touchstart or touchend maybe touchmove event handlers. These should work. For example:
document.getElementById("display").addEventListener('touchstart',insert,false);

Javascript: Capture mouse wheel event and do not scroll the page?

I'm trying to prevent a mousewheel event captured by an element of the page to cause scrolling.
I expected false as last parameter to have the expected result, but using the mouse wheel over this "canvas" element still causes scrolling:
this.canvas.addEventListener('mousewheel', function(event) {
mouseController.wheel(event);
}, false);
Outside of this "canvas" element, the scroll needs to happen. Inside, it must only trigger the .wheel() method.
What am I doing wrong?

You can do so by returning false at the end of your handler (OG).
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
return false;
}, false);
Or using event.preventDefault()
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);
Updated to use the wheel event as mousewheel deprecated for modern browser as pointed out in comments.
The question was about preventing scrolling not providing the right event so please check your browser support requirements to select the right event for your needs.
Updated a second time with a more modern approach option.

Have you tried event.preventDefault() to prevent the event's default behaviour?
this.canvas.addEventListener('mousewheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);
Keep in mind that nowadays mouswheel is deprecated in favor of wheel, so you should use
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);

Just adding, I know that canvas is only HTML5 so this is not needed, but just in case someone wants crossbrowser/oldbrowser compatibility, use this:
/* To attach the event: */
addEvent(el, ev, func) {
if (el.addEventListener) {
el.addEventListener(ev, func, false);
} else if (el.attachEvent) {
el.attachEvent("on" + ev, func);
} else {
el["on"+ev] = func; // Note that this line does not stack events. You must write you own stacker if you don't want overwrite the last event added of the same type. Btw, if you are going to have only one function for each event this is perfectly fine.
}
}
/* To prevent the event: */
addEvent(this.canvas, "mousewheel", function(event) {
if (!event) event = window.event;
event.returnValue = false;
if (event.preventDefault)event.preventDefault();
return false;
});

This kind of cancellation seems to be ignored in newer Chrome >18 Browsers (and perhaps other WebKit based Browsers). To exclusively capture the event you must directly change the onmousewheel method of the element.
this.canvas.onmousewheel = function(ev){
//perform your own Event dispatching here
return false;
};

Finally, after trying everything else, this worked:
canvas.addEventListener('wheel', (event) => {
// event.preventDefault(); Not Working
// event.stopPropagation(); Not Working
event.stopImmediatePropagation(); // WORKED!!
console.log('Was default prevented? : ',event.defaultPrevented); // Says true
}, false)

To prevent the wheel event, this worked for me in chrome -
this.canvas.addEventListener('wheel', function(event) {
event.stopPropagation()
}, true);