We Keep Coding

Prevent default single click event on double click on a link in HTML

My code is pretty simple:
var clickCount = 0, clickEl = [];
var manualClick = false;
$(document).on('click', 'a', function (e) {
if (e.altKey || e.ctrlKey || e.shiftKey) {
return;
}
clickCount = clickCount + 1;
clickEl[clickCount] = this;
var that = this;
if (1 === clickCount) {
setTimeout(function () {
if (2 === clickCount && clickEl[1] === clickEl[2]) {
window.stop();
embed_anchor(that);
}
clickCount = 0;
}, 250);
}
});
It basically checks if there is double click. If yes, it cancel the single click redirect using window.stop(). It used to work great, but I don't know if it's Chrome or my new PC, window.stop() failing 9.5/10 times.
Even a simple code like:
setInterval(function () {
window.stop();
}, 1);
is not able to prevent redirect these days. Is there any alternative solution for me. I ideally don't want to use e.preventDefault() because this script is part of TamperMonkey and I feel e.preventDefault() will break single click on ton of sites.
Is there any way to hold the event for 250 ms, or cancel and raise the same event (It must behave like last one so no issues with any site). I am open too pretty much everything. I would prefer if my script don't work on some sites rather than breaking any site.

I think you're looking for the dblclick javascript event. It's usable on all updated browsers currently.
There's already a post here: Detect if browser/device supports double click events to detect if it's supported by using a timeout to check if there is an another click after the first click.

Here is the piece of code I wrote to solve my problem:
$.fn.on2 = function(type, sel, handler) {
this[0].addEventListener(type, function(event) {
var t = event.target;
while (t && t !== this) {
if (t.matches(sel)) {
handler.call(t, $.event.fix(event));
}
t = t.parentNode;
}
}, true);
}
var clickEvents = [];
$(document).on2('click', 'a', function (event) {
if (event.altKey || event.ctrlKey || event.shiftKey || this.text.length == 0) {
return;
}
clickEvents.push(event);
if (event.originalEvent.isTrusted) {
event.preventDefault();
event.stopImmediatePropagation();
}
var target = this;
if (1 === clickEvents.length) {
setTimeout(function () {
if (2 === clickEvents.length && clickEvents[0].target == clickEvents[1].target) {
doWhatever(clickEvents[0].target);
} else {
clickEvents[clickEvents.length-1].target.dispatchEvent(new MouseEvent("click", clickEvents[clickEvents.length-1].originalEvent));
}
clickEvents = [];
}, 250);
}
});

Blocking F5 refresh not working in Chrome

Here is the code that worked earlier, but now doesn't work anymore. Does anyone know why?
document.onkeydown = function()
{
if(event.keyCode==116) {
event.keyCode=0;
event.returnValue = false;
}
}
// To avoid refresh, using context menu of the browser
document.oncontextmenu = function() {event.returnValue = false;}

You refer to event in your functions, but you never actually pass it:
document.onkeydown = function(){ /* ... */ }
document.oncontextmenu = function() {event.returnValue = false; }
// should be
document.onkeydown = function(event){ /* ... */ }
document.oncontextmenu = function(event) {event.returnValue = false; }
In the first version of the oncontextmenu you set 'returnvalue' of object 'event' to false, but it doesnt exist because you never actually pass it on to the function.

Recieve the event in your function
document.onkeydown = function(event)
{
if(event.keyCode==116) {
event.keyCode=0;
event.returnValue = false;
}
}
Or Try preventing the action by that key
document.onkeydown = function(event)
{
if(event.keyCode==116) {
event.preventDefault();
}
}

try this
<script>
window.onload = function () {
document.onkeydown = function (e) {
return (e.which || e.keyCode) != 116;
};
}
</script>

window.onbeforeunload only works after i refresh the page

note: i see this Question but the problem is not the same.
I have one page named login_check.cfm and this page do a location.href to home.cfm
inside the home.cfm i have this code
<script>
window.onbeforeunload = function() { window.history.go(0); };
</script>
or
<script>
window.onbeforeunload = function() { window.history.forward(1); };
</script>
my intention is to prohibit the User to use the back button, and its work, but only a do a refresh or use a link to do refresh.
the problem is my page is 90% ajax based and the most off the user go back to login page when they clicked backbutton.
use Document ready() make no difference.
suggestions ?

i found this old Question where rohit416 give a good answer and it still works
(function ($, global) {
var _hash = "!",
noBackPlease = function () {
global.location.href += "#";
setTimeout(function () {
global.location.href += "!";
}, 50);
};
global.setInterval(function () {
if (global.location.hash != _hash) {
global.location.hash = _hash;
}
}, 100);
global.onload = function () {
noBackPlease();
// disables backspace on page except on input fields and textarea.
$(document.body).keydown(function (e) {
var elm = e.target.nodeName.toLowerCase();
if (e.which == 8 && elm !== 'input' && elm !== 'textarea') {
e.preventDefault();
}
// stopping event bubbling up the DOM tree..
e.stopPropagation();
});
}
})(jQuery, window);

Check which button clicked on page leave prompt?

So I have this code and I'm trying to find out how to check which button the user clicks on the prompt. I'd like to fire an event if they click stay or fire a different event if they leave. Is this possible?
var submitted = false;
$(document).ready(function () {
window.onbeforeunload = function (e) {
if (!submitted) {
var message = "Are you sure you want to leave?", e = e || window.event;
if (e) {
e.returnValue = message;
}
return message;
}
}
$("form").submit(function() {
submitted = true;
});
});

Actually there is no way to find that which button is clicked(in case of onbeforeunload confirm box) according to my knowledge.
But we can achieve the required functionality by following way:
window.onbeforeunload = function (e) {
if( $("table tbody.files tr.template-download.fade").length > 0 )
{
var message = "XYZ",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
}
}
And you can write the code for 'yes' button click inside following:
$( window ).unload(function() {
//--> Here
});

use Javascript "confirm" for that:
if(confirm("Are you sure you want to leave?"))
{
//True part
}
else
{
//False part
}

how to detect if a link was clicked when window.onbeforeunload is triggered?

I have window.onbeforeunload triggering properly. It's displaying a confirmation box to ensure the user knows they are navigating (closing) the window and that any unsaved work will be erased.
I have a unique situation where I don't want this to trigger if a user navigates away from the page by clicking a link, but I can't figure out how to detect if a link has been clicked inside the function to halt the function. This is what I have for code:
window.onbeforeunload = function() {
var message = 'You are leaving the page.';
/* If this is Firefox */
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
if(confirm(message)) {
history.go();
}
else {
window.setTimeout(function() {
window.stop();
}, 1);
}
}
/* Everything else */
else {
return message;
}
}

You're looking for deferred event handling. I'll explain using jQuery, as it is less code:
window._link_was_clicked = false;
window.onbeforeunload = function(event) {
if (window._link_was_clicked) {
return; // abort beforeunload
}
// your event handling
};
jQuery(document).on('click', 'a', function(event) {
window._link_was_clicked = true;
});
a (very) poor man's implementation without jQuery's convenient delegation handling could look like:
document.addEventListener("click", function(event) {
if (this.nodeName.toLowerCase() === 'a') {
window._link_was_clicked = true;
}
}, true);
this allows all links on your page to leave without invoking the beforeunload handler. I'm sure you can figure out how to customize this, should you only want to allow this for a specific set of links (your question wasn't particularly clear on that).

var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}

You can differ between a link unload or a reload/user entering a different address unload s by using a timer. This way you know the beforeunload was triggered directly after the link click.
Example using jQuery:
$('a').on('click', function(){
window.last_clicked_time = new Date().getTime();
window.last_clicked = $(this);
});
$(window).bind('beforeunload', function() {
var time_now = new Date().getTime();
var link_clicked = window.last_clicked != undefined;
var within_click_offset = (time_now - window.last_clicked_time) < 100;
if (link_clicked && within_click_offset) {
return 'You clicked a link to '+window.last_clicked[0].href+'!';
} else {
return 'You are leaving or reloading the page!';
}
});
(tested in Chrome)