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

How to disable window.onbeforeunload from <a> tag?

First I used window.onbeforeunload on my application. It's working on over page but when click on anchor link it should be disabled Click. Any ideas? Please share. My code is below it is not working:
var submitFormOkay = false;
window.onbeforeunload = function () {
if (!submitFormOkay) {
return "Don't delay your Success. Get FREE career counselling session. Fill in the details below";
} else {
submitFormOkay = '';
}
}
<a class="navbar-brand" href="http://www.google.com">Click</a>

You could attach a global click handler on document.body which, if the click passed through an a element, sets submitFormOkay to true (or you could use another variable to bypass the check, or just clear the handler by assigning null to window.onbeforeunload), e.g.:
$(document.body).on("click", "a", function() {
submitFormOkay = true; // Or set another flag you'll check,
// or clear onbeforeunload entirely
});
Without jQuery (since I missed the jquery tag initially):
document.body.addEventListener("click", function(e) {
var element;
for (element = e.target; element != document.body; element = element.parentNode) {
if (element.tagName.toUpperCase() === "A") {
submitFormOkay = true; // Or set another flag you'll check,
// or clear onbeforeunload entirely
break;
}
}
}, false);

using jquery it can be follow:
var submitFormOkay = false;
$(window).on('beforeunload',function () {
if (!submitFormOkay) {`enter code here`
return "Don't delay your Success. Get FREE career counselling session. Fill in the details below";
} else {
submitFormOkay = '';
}
})
<a class="navbar-brand" href="http://www.google.com">Click</a>
$('a').on('click',function(e){
e.preventDefault();
$(window).off('beforeunload');
window.location = $(this).attr('href');
});

How to disable a function in javascript onclick

I added a redirect function when refresh button or user try to exit the page they get redirected but what I want to happen is this function to be unload or not executed when they click my button
<a onClick="alert(you are going to tweeter);"href="http://twitter.com" class="tweetbutton" >I Like Twitter</a>
so what happens is it conflicts and two alerts shows up, what I was needing is when the tweetbutton button is click the onclick alert will the one to appear then get redirected to twitter.com without the function below being executed
(function() {
setTimeout(function() {
var __redirect_to = 'http://facebook.com';
var _tags = ['btn', 'input'],
_go, _i, _i2;
for (_i in _tags) {
_els = document.getElementsByTagName(_tags[_i]);
for (_i2 in _go) {
if ((_tags[_i] == 'input' && _go[_i2].type != 'btn' && _go[_i2].type != 'submit' && _go[_i2].type != 'image') || _go[_i2].target == '_blank') continue;
_els[_i2].onclick = function() {
window.onbeforeunload = function() {};
}
}
}
window.onbeforeunload = function() {
setTimeout(function() {
window.onbeforeunload = function() {};
setTimeout(function() {
document.location.href = __redirect_to;
});
});
return 'you are leaving this page'
}
});
});

Update you code as follows:
<a "href="http://twitter.com" class="tweetbutton" >I Like Twitter</a>
Add this to your js
document.addEventListener('click', function (e) {
if (e.target.className == 'tweetbutton') alert('you are going to twitter');
});

jquery keyup not firing

I use the following function on keyup event to redirect to another javascript function.
Problem is it does'nt seem to fire, although it does bind the function to the textbox.
$(document).ready(function () {
EnablePickTargetButton();
//clear contents; use a delay because tinyMCE editor isn't always fully loaded on document.ready
var t = setTimeout(function () {
if (typeof textEditorForCreate != 'undefined' && tinymce.editors.length > 0)
tinyMCE.activeEditor.setContent('');
}, 300);
var txtSearchUser = $('#txtSearchUser');
if(typeof txtSearchUser != 'undefined')
{
$('#txtSearchUser').keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
searchUser();
}
else
alert('cucu');
});
}
});
Not even the alert shows up. Checking the html, I can see it doesn't add onkeyup to the textbox; The textbox is in a popup window hosted in a div on the form; But on document.ready it runs the function without error.

Try this delegate on document or closest static element. (If the element is added dynamically)
$(document).on('keyup','#txtSearchUser',function(){
//Code
});

it works :
$(document).ready(function(){
$('#txtSearchUser').keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
else
alert('cucu');
});
});
http://jsfiddle.net/jMk5S/
check if you're referencing your html element properly. Perhaps you mix id with the class?

I edited your code and is working :
The problem is in your document ready function , you have a syntax error , next time check console in your browser to see what's wrong :
DEMO HERE
$(document).ready(function () {
//EnablePickTargetButton();
//clear contents; use a delay because tinyMCE editor isn't always fully loaded on document.ready
var t = setTimeout(function () {
if ($('#textEditorForCreate').length != 0 && tinymce.editors.length > 0)
tinyMCE.activeEditor.setContent('');
}, 300);
if($('#txtSearchUser').length!=0)
{
$('#txtSearchUser').keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
searchUser();
}
else
alert('cucu');
});
}
});

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)