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.

Trigger event when user clicks the browsers back button

Is it possible with jquery to trigger a function when the user clicks the browsers back button.
I have a lightbox/widget that when open fills the window when it is open. There is a close button etc but this would be good if this closed if a user hit the back button by mistake.
I have this so far but the function doesnt seem to run at all
$(window).on("navigate", function (event, data) {
event.preventDefault();
console.log('BACK PRESSED');
var direction = data.state.direction;
if (direction === 'back') {
if(widgets.full_active){
$('.close', widgets.active_widget).click();
event.preventDefault();
console.log('CLOSE THIS');
}
}
if (direction === 'forward') {
// do something else
}
});
By not running this line at the start of the function event.preventDefault(); should mean the page never changes

Usually, I do this using the native JavaScript API from the browser, like described here: Manipulating the Broser History.
With jQuery, I see people usually using this plugin: History.js, although I have no idea what is it's status.
The event you're looking for is onpopstate.
A popstate event is dispatched to the window every time the active
history entry changes between two history entries for the same
document.

Logout webpage when click on refresh button

I am developing a website. Where I need to logout the page when one try to refresh the page.
I got the code for logout when one click on f5 for refresh and also I got the code for disable right click on the page. but I dont know how to prevent the refresh button of browser or logout when I press refresh button. I searched many sites. But didn't get an answer.
The code I gor for F5 key is
function fkey(e){
e = e || window.event;
if( wasPressed ) return;
if (e.keyCode == 116) {
alert("f5 pressed");
wasPressed = true;
}else {
alert("Window closed");
}
}
Can anyone please help me for the issue with refresh button?

I think it will work
$("*").keypress(function(e)
{
if (e.keyCode == 116) {
e.preventDefault();
}
});

Try this:
window.onbeforeunload = function(e){
//call logout process here
}
onbeforeunload is an event that fires when a window is about to unload its resources. The document is still visible and the event is still cancelable, in other words, whenever you refresh or close a page it fires an event 'onbeforeunload'. When this event returns a non-void value, the user is prompted to confirm the page unload. In most browsers, the return value of the event is displayed in this dialog.
Reference: https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onbeforeunload

window.onbeforeunload = function(e){
//call logout process here
}
Any custom declaration on OnBeforeUnload will not be executed as the support is removed from the code. So, the above solution will not work for Chrome.
Instead, use HttpContext.GetOwinContext().Authentication.SignOut(DefaultAuthenticationTypes.ApplicationCookie);

Changing browser tabs undesirably fires the focus event, especially in Google Chrome

I've got a little issue with the focus event that I just became aware of. Apparently, focus fires when switching to another browser tab and then back again. I'd rather not have that happen; is it possible?
I was never aware of this until today. Here's a little demo: http://jsfiddle.net/MJ6qb/1/
var times = 0;
$('input').on('focus', function() {
times ++;
$(this).after('<br>Focused '+times+' times');
});
To reproduce: Focus on the input, then switch browser tabs, then switch back. All browsers seem to fire the focus event when you switch back to the tab, and Google Chrome 19 is firing it twice!
Ideally, the function should not run when switching browser tabs at all but only on user click or Tab, but now that I'm aware of the Chrome issue I'm a bit more concerned about that because it's resulting in extra unwanted back-to-back AJAX requests in my real app (it's for fetching results for an autocomplete that needs to be up to date, but not so much that I want to use the keyup event).
It doesn't seem jQuery related (I did test with vanilla javascript) but I can using jQuery for a solution. Is there anything I can do about this? I know I can use jQuery's one() but I do want the function to run more than once.

Try this
var times = 0;
var prevActiveElement;
$( window ).on( "blur", function(e){
prevActiveElement = document.activeElement;
});
$('input').on('focus', function() {
if (document.activeElement === prevActiveElement) {
return;
}
prevActiveElement = document.activeElement;
times++;
$(this).after('<br>Focused ' + times + ' times');
}).on( "blur", function(){
prevActiveElement = null;
});​

Try this to get around the problem:
var times = 0, foc=true;
$(window).on('focus', function() {
foc = false;
setTimeout(function() {foc=true}, 200);
});
$('input').on('focus', function() {
if (foc || times===0) {
times ++;
$(this).after('<br>Focused '+times+' times');
}
});
​
FIDDLE
​

how to identify onbeforeunload was caused by clicking close button

How do I determine if onbeforeunload was caused by clicking the close button or a page refresh or generally what event caused onbeforeunload?
here is a snippet:
window.onbeforeunload = function( e ){
if( !e ) e = window.event;
// insert code to determine which is the source of the event
}
Please help me.

Referring to various articles and doing some trial and errors, finally developed this idea which works perfectly for me just the way i wanted it to happen. The logic was quiet simpler it implement as well The idea was to detect the unload event that is triggered by closing the browser. In that case, the mouse will be out of the window, pointing out at the Close('X') button.
$(window).on('mouseover', (function () {
window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
return "";
}
The ConfirmLeave function will give the pop up default message, it case there is any need to customize the message, return the text to be displayed instead of empty string
See if this helps, :)

As far as I know, there is no way of determining what caused the onbeforeunload. The event is triggered when window is about to close whether closing the browser or some other way.

If the close button was pressed the value of e.clientY is negative. For the other possible sources i doubt there is a solution.
window.onbeforeunload = function() {
var e = window.event;
alert(e.clientX + " / " + e.clientY);
}

I searched for something similar but ended up empty handed.
So I tried doing the opposit
We can identify all the events but browser events.
Refer below (Untested) snippet.
var target = $( e.target );
if(!target.is("a, :button, :submit, :input, .btn, .bulkFormButton")){
//Your code for browser events)
}
$("form").submit(function () {
//Your code for browser events)
});
This worked for me but there are still some events that are not handled.
I am in search of those.
If anyone have idea about them please share.