I'm writing a little jQuery extension that prevents a user from double clicking on a link.
$.fn.preventDoubleClick = function() {
return this.click(function() {
var $t = $(this)
, retVal = $t.data('active') // check the internal flag
;
if (retVal || retVal === undefined) { // if ON...
$t.data('active', false); // set the internal flag to OFF
setTimeout(function() {
$t.data('active', true);
}, 1000); // after 1 second, set the internal flag to ON
console.log("allowed");
return true;
} else { // if OFF...
console.log("blocked");
return false;
}
});
};
the problem is that if there are other click event handlers on the elements, they still fire:
$('#myLink').click(function() {
console.log("Clicked");
});
$('#myLink').preventDoubleClick();
And now when you double click the link, I get this in my log:
allowed
clicked
blocked
clicked
So basically, I need the click function inside preventDoubleClick to stop all the other event handlers from firing. How can I do this?
Thanks to Adam's link, I was able to see the function I needed: stopImmediatePropagation().
I believe you're looking for event.stopPropagation
EDIT: turns out this was not the correct option for Nick's purposes. Please see his answer.
Related
I have two methods
$('.btn-delete').click(function(){
//do A
//return false?
});
$('.btn-delete').click(function(){
//do B
});
How can I stop 'B' from happening when A returns false?
var whatDoesAReturn = false;
$('.btn-delete').click(function(){
if (something) {
whatDoesAReturn = true;
return true;
} else {
whatDoesAReturn = false;
return false;
}
});
$('.btn-delete').click(function(){
if (!whatDoesAReturn) {
// Do whatever
}
});
Use the jquery event's stopImmediatePropagation. That's exactly what it's for:
$('.btn-delete').click(function(e){
//do A
if (a is returning false)
e.stopImmediatePropagation();
});
$('.btn-delete').click(function(){
//do B
});
Why not to put altogether?
$('.btn-delete').click(function(){
//do A
// if true do B
});
You better make a single function and put condition to handle if that is not the solution you can set a flag in first event.
Using single event handler
$('.btn-delete').click(function(){
//do A
if(condition != false)
execute code of second event.
//return false?
});
Using flag
flag = true;
$('.btn-delete').click(function(){
//do A
if (something) {
flag = true;
else
flag = false;
return flag;
});
$('.btn-delete').click(function(){
if(!flag) return;
//do B
});
(Just in case anyone wants a non-jQuery solution).
This can't be done directly in plain JavaScript, because you can't be sure in which order the event listeners will be triggered.
According to the spec,
Although all EventListeners on the EventTarget are guaranteed to be
triggered by any event which is received by that EventTarget, no
specification is made as to the order in which they will receive the
event with regards to the other EventListeners on the EventTarget.
Then, one possibility is joining all handlers inside only one function.
But if that's not possible, you could use event delegation to a wrapper, and stop propagation if necessary:
<div class="btn-wrapper"><button class="btn-delete">Delete</button></div>
var btn = document.querySelector('.btn-delete');
btn.addEventListener('click', function(e){
// do A
if(cond) e.stopPropagation();
}, false);
btn.parentNode.addEventListener('click', function(e){
//do B
}, false);
Can someone explain me why this snippet can't work ?
I can't use specific features like window.location, submit(), (instead of trigger()), because this function is bound to elements that are very differents.
$('a, button').bind('click', function(oEvent, oData) {
var oButton = $(this);
var bSkip = (oData && oData.skip);
if(true === bSkip) {
return true;
} else {
oEvent.preventDefault();
//oEvent.stopPropagation();
if(confirm('This is a confirm box')) {
$(oButton).trigger('click', { skip: true });
}
}
});
Thanks in advance ! ;)
In your case even though the click event gets fired the default behavior of the links may not be triggered because of the constraints imposed by the browser
If I understand what you are trying to do correctly(if the action s not confirmed then cancel the default behavior), then you can achieve it by the below... there is no need to fire the event again
$('a, button').bind('click', function (oEvent, oData) {
if (confirm('This is a confirm box')) {
return true;
} else {
oEvent.preventDefault();
}
});
Demo: Fiddle
I have a little code like this:
$("input#checkbox").change(changeCheckbox);
function changeCheckbox() {
var inputCheck = $("input#checkbox"),
button = $("input#button");
if (inputCheck.is(":checked")) {
button.hide();
} else {
button.show();
}
}
This work perfect in all modern Browser and IE 8
But when I use this one with event.preventDefault();:
$("input#checkbox").change(changeCheckbox);
function changeCheckbox(event) {
event.preventDefault(); // <-- Here
var inputCheck = $("input#checkbox"),
button = $("input#button");
if (inputCheck.is(":checked")) {
button.hide();
} else {
button.show();
}
}
or I set return false;
$("input#checkbox").change(changeCheckbox);
function changeCheckbox() {
var inputCheck = $("input#checkbox"),
button = $("input#button");
if (inputCheck.is(":checked")) {
button.hide();
} else {
button.show();
}
return false; // <-- Here
}
then the function only works once and I can do nothing more with this in (only) Internet Explorer 8
Can someone explain to me why this happens?
And i have a lot of other functions and use similar codes with event.preventDefault(); and return false; at the end and there are OK...
I use this jQuery Version: jquery_1.10.1.min.js
Thanks in advance!
Can someone explain to me why this happens?
It's a bug in Internet Explorer (what else). The change event is supposed to be not cancelable, in contrast to click events (see Is event.preventDefault cancelling change events?, jQuery/Javascript: Click event on a checkbox and the 'checked' attribute and Why does preventDefault() on a parent element's click 'disable' a checkbox?). IE8 however does prevent the checkbox from being (un)checked when the change event is canceled. Try it here.
How to work around that? Just remove e.preventDefault() (or return false) from your code. I don't see any reason to use it anyway.
What you want to achieve is to show/hide #button based on the value of #checkbox. You can do it this way. Very less lines of code as compared to your code
$('#checkbox').on('change', function() {
$('#button').toggle(this.checked);
});
FIDDLE
You can add this code for IE8:
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
Since you are using jQuery you can use the built-in cross-browser event fix:
event = $.event.fix(event);
See: http://www.jquerysdk.com/api/jQuery.event.fix
I am trying to implement notifying when the user closes or reloades the page.Crrently i am using the following code
function unloadPage(){
return "Your changes will not be saved.";
}
window.onbeforeclose = unloadPage;
This works fine.But the problem is this happens whenever a navigation takes place.That is either a page refresh or a form submission or a hyperlink click or whatever navigation takes place..I just want to work this code only for browser refreshing and closing.I knew about setting a flag and checking it.
But i have to integrate this in a big application.So it will be difficult to add the code in every page.So is there an easy way.
Is there a way to catch the refresh or browser cosing so that can use it.
Note that in your code, you're using onbeforeclose, but the event name is beforeunload, so property is onbeforeunload, not onbeforeclose.
I just want to work this code only for browser refreshing and closing. Is there a way to catch the refresh or browser cosing so that can use it.
No. Instead, you'll have to capture each link and form submission and either set a flag telling your onbeforeunload handler not to return a string, or removing your onbeforeunload handler (probably the flag is cleaner).
For example:
var warnBeforeClose = true;
function unloadPage(){
if (warnBeforeClose) {
return "Your changes will not be saved.";
}
}
window.onbeforeunload = unloadPage;
// ...when the elements exist:
$("a").click(dontWarn);
$("form").submit(dontWarn);
function dontWarn() {
// Don't warn
warnBeforeClose = false;
// ...but if we're still on the page a second later, set the flag again
setTimeout(function() {
warnBeforeClose = true;
}, 1000);
}
Or without setTimeout (but still with a timeout):
var warningSuppressionTime = 0;
function unloadPage(){
if (+new Date() - warningSuppressionTime > 1000) { // More than a second
return "Your changes will not be saved.";
}
}
window.onbeforeunload = unloadPage;
// ...when the elements exist:
$("a").click(dontWarn);
$("form").submit(dontWarn);
function dontWarn() {
// Don't warn for the next second
warningSuppressionTime = +new Date();
}
Update in 2017: Also note that as of at least a couple of years ago, browsers don't show the message you return; they just use the fact you returned something other than null as a flag to show their own, built-in message instead.
One of the simple solutions to your problem is to have a flag and then call your function only if the flag is valid. In this case , you can bind the anchor tags, F5 key and form submit button click to events that set the flag as false. So your alert bar will be visible only if the above cases don't happen :)
Here's the script:
var validNavigation = false;
function endSession() {
// Browser or broswer tab is closed
alert("bye");
}
function wireUpEvents() {
window.onbeforeunload = function() {
if (!validNavigation) {
endSession();
}
}
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});
Check this link
It gives you information on how to handle onbeforeunload event.
The idea is to have a global flag on the page. When any change is done to the fields, this flag is set to true. When clicked on save button, then this flag needs to be set to false.
In the onbeforeunload event, check whether the flag is true, then show the message accordingly.
var needToConfirm = true;
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (needToConfirm)
{
// check on the elements whether any change has been done on the fields.
// If any change has been done, then set message here.
}
}
function saveClicked()
{
needToConfirm = false;
}
DEMO
(Run or refresh the fiddle to see the alert onbeforeunload() event message and click on the link "kk" ,it wont show onbeforeunload() event message. Try it in your webpage)
I have a solution for you, you don have to add onclick event to each tags and all.
Just add this to any where on your pages .
<input type="hidden" value="true" id="chk"/>
and add this code to your document head tag
<script>
window.onbeforeunload = confirmExit;
function confirmExit()
{
if(document.getElementById("chk").value=="true")
{
return "Your changes will not be saved.";
}
}
document.onclick = myClickHandler;
function myClickHandler() {
document.getElementById("chk").value="false";
}
<script>
Hope this helps
Thank you
i have a page on which i want to confirm if the user wants to leave.
i have to confirm only when a certain condition is met so i wrote code like this
var back=false;
back=//check if user pressed back button
window.onbeforeunload = function (e) {
alert(back); //this alerts true
if(back==true)
return false;
//e.preventDefault; --this does not work too
};
but this does not work. i mean when i click on back button this onbeforeunload still fires and i still get the confirmation message even when i m returning false.Whats can be wrong?
Thanks
Return a string if you want to offer an option to the user to abort the unload. Return nothing in other cases.
var back = false;
back = true; //Somewhere, the condition is set to true
window.onbeforeunload = function (e) {
if(back == true)
return "Are you sure to exit?";
}
$(window).bind('beforeunload',function() {
return "'Are you sure you want to leave the page. All data will be lost!";
});
$('#a_exit').live('click',function() {
$(window).unbind('beforeunload');
});
Try this. Above code is working in most of conditions.
For the sake of completeness here a more modern, recommended approach:
let warn = false;
window.addEventListener('beforeunload', e => {
if (!warn) return;
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
warn = true; // during runtime you change warn to true
Typically, it is better to use window.addEventListener() and the
beforeunload event, instead of onbeforeunload.
Source
The reason why your originally posted code didn't work is that false is a non-null value. If you would have returned null or undefined in the situation where you don't want to spawn a pop-up warning your code would have worked as expected.
The currently accepted answer works because JavaScript implicitly returns undefined at the end of the function.
Condition for back-end
var confirmExist = function (e) {
return true;
}
window.onbeforeunload = confirmExist;
http get, post request
.then(function(r)) {
window.onbeforeunload = null;
}
You could also consider not setting the window.beforeunload event untill your list of conditions are met.
var confirmUserToLeave = function () {
if (/* conditions are met */) {
window.unbeforeunload = function (e) {
/* whatever you want to do here */
};
} else {
window.unbeforeunload = undefined;
}
};
Then just call that method on certain events that might change the outcome of your 'conditions are met'.