Develop Reference

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.

javascript prevent middle mouse button from opening link in new tab

On some websites, you can right-click on a link and chose "open in a new tab" and it works fine, but not if one uses the middle mouse button to do so.
I encountered this a few times, it's it not too annoying but I'm still curious what causes this behaviour. (About the HOW)
Here is a site that behaves this way browsing with Chrome 46:
http://ebookfriendly.com/free-public-domain-books-sources/
the html link tags looks normal:
<a title="Feedbooks" href="http://www.feedbooks.com/">⇢ Feedbooks</a>
The cause must be something in the javascript. Any pointers?

One way to do this is using the auxclick event. (auxclick on MDN)
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});

Seems like this link has an event listener that uses preventDefault() and opens the page by other means.
Edit: hard to say why exactly they do this but when I look at the whole handler it seems that the link is being passed to google analytics:
function(e) {
var n = this.getAttribute("href"),
i = "string" == typeof this.getAttribute("target") ? this.getAttribute("target") : "";
ga("send", "event", "outbound", "click", n, {
hitCallback: t(n, i)
}, {
nonInteraction: 1
}), e.preventDefault()
}

You can ask which button caused the event and prevent the default behavior.
document.querySelector("a").addEventListener("click", function(e) {
if (e.which === 2) {
e.preventDefault();
}
}, false);

$(document).mousedown(function(e){
if(e.which == 2 ){
e.preventDefault();
alert("middle click");
return false;
}
});
works only if you keep the alert()

Detect browser/tab closing

I know how to display an alert to the user if they attempt to navigate away from the current page asking them if they are sure they wish to do so but I was wondering if there is a way to display this alert ONLY when the window / tab is being closed?
I'd like to only have the confirmation display when the window or tab is being closed, not when the user clicks a link.

Not possible.
the only thing close is the onbeforeunload event, but there isn't a difference (to javascript) between a closed window/tab or a navigation to another page.
Follow-up:
I suppose you could attach a click handler to every anchor on the page and use a "dirty" flag, but that's really hack-ish. something like (forgive me, but using jquery for simplicity):
(function(){
var closingWindow = true;
$('a').on('click', function(){
if (this.href == /* on-domain link */){
closingWindow = false;
}
});
$(window).on('beforeunload',function(){
if (closingWindow){
// your alert
}
});
})();
but that's about as close as you're going to get. note: this isn't going to help if another javascript function uses window.location, etc.

You cannot differentiate between the two.
window.onbeforeunload is triggered immediately before the browser unloads its resources. You do not know the reason for the unload, only that it's about to occur:
From the MDN:
An event that fires when a window is about to unload its resources.
The document is still visible and the event is still cancelable.

How about doing something like this?
Have a global variable set to false (i.e. var hasCLickedLink = false;)
On all your links (<a>), attach an event handler that sets the variable to true
On onbeforeunload, check the value of the variable to see if a link has been clicked or not. If it is still false, then they haven't clicked a link so give them the alert.

You need to explicitly specify events for which you don't want to show confirmation dialogue box.
var validNavigation = 0;
function bindDOMEvents() {
// Attach the event keypress to exclude the F5 refresh
$(document).keydown(function(e)
{
var key = e.which || e.keyCode;
if (key == 116)
{
validNavigation = 1;
};
});
// Attach the event click for all links in the page
$("a").bind("click", function()
{
validNavigation = 1;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function()
{
validNavigation = 1;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function()
{
validNavigation = 1;
});
};
$(document).ready(function()
{
bindDOMEvents();
window.onbeforeunload = function () {
console.log(validNavigation);
if (validNavigation == '1')
{
console.log("No Alert.. Continue");
}
else
{
return false;
}
};
});

This solution worked for me in Firefox with Violentmonkey.
It is used like most of all window.onbeforeunload and check if left mouse button was pressed. So if pressed, this mean, click at free space or link opens - not closing tab.
function DetectBrowserExit()
{
if (butpres == 0) {
//your action before closing tab, alert not showing
}
}
window.onbeforeunload = function(){ DetectBrowserExit(); }
// the key is pressed, then when window.onbeforeunload - link is opening, so, tab not closing
document.addEventListener('mousedown',function(e){
if (e.which == 1) { //1-lbutton 2-mb 3-rb
//e.preventDefault();
butpres = 1
setTimeout(function() {
butpres = 0 //if after 3 seconds the script still works then the link has not been clicked, clear the click and continue to catch new clicks
//alert(butpres);
}, 3000); //Two seconds will elapse and Code will execute.
//alert(butpres);
//command_lock();
}
},false);

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

Prevent middle mouse click scrolling

I'm looking for a way to stop the middle mouse click from causing the browser to start scrolling, and showing the little scroll 'compass'.
I have seen Disabling middle click scrolling with javascript however the solution is a bit more hackey than I would like, and doesn't seem like something I could actually use.
I'm looking for a more definitive "This is how you do it" or "You cannot do that, son".
I am of course open to hacks and workarounds.
Just because S.O. questions look nicer with code, here is what I am using to close tooltips when right or middle clicking.
msg.mousedown(function(e) {
if (e.which == 2) { //middle mouse click
msg.hide();
e.preventScrolling(); //if only this worked...
}
else if (e.which == 3) { //right mouse click
msg.hide();
}
}).bind('contextmenu', function(e) {
e.preventDefault();
}).click(function(e) {
e.stopPropagation();
});
edit: jQuery, JavaScript, whatever, let's just all play nicely now :)
Edit 2:
I'm more interested in preventing the little scroll 'compass' than stopping the page from scrolling. I guess that wasn't very clear from my initial description.

Use:
$('body').mousedown(function(e){if(e.button==1)return false});
This works on Chrome: http://jsfiddle.net/PKpBN/3/

There's no need to include jQuery just for this.
If you are using jQuery, there are already some great answers here. If not, you can use vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }

tested with the current version of firefox and chrome
document.body.onmousedown = function(e) {
if(e.button == 1) {
e.preventDefault();
return false;
}
}

Try using return false; instead of e.preventScrolling();

document.body.style.overflow=allowScroll?"":"hidden";

If you want to stop scrolling completely, here is the required code:
window.onscroll = function() {
document.body.scrollTop = 0;
}
This will effectively disable the middle button as well..