Whenever I use preventDefault(), I typically place it at the top of the event handler, like so:
$('#foo').on('click', function(e){
e.preventDefault();
// do stuff
});
Is there any harm in placing it at the bottom of the event handler, and doing stuff before you invoke e.preventDefault()?
Another way of phrasing this question: can you be sure that, by including e.preventDefault() anywhere within the event handler, you will never follow through - say, to the target on a link or the submission of a form?
I've set up a fiddle that you can play with here: http://jsfiddle.net/tuanderful/SMdrN/
Yes.. where you place the statement is irrelevant.
As long as e.preventDefault() is called within the handler the default action will not be triggered
You can place it wherever you want, you can even call e.preventDefault(); inside some if block, it doesn't change the behavior
As long as nothing goes wrong in the code, it doesn't matter where you call preventDefault.
If you put it first in the code, it will prevent the default action even if the script crashes further on.
If you put it last in the code, it will only prevent the default action if the script didn't crash anywhere on the way.
Related
I want to have the window.print() pop up but when User clicks on Print button, it is not windows print but onclick or window.onbeforeprint I wish to trigger my own personalised print function.
As such, on click Print, I need to cancel the print action and trigger my personalised() function.
Please help how to cancel window.print(); on click on the Print button
You can achieve this by simply using the preventDefault().
What Event.preventDefault() does is
The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.
You can read more at Event.preventDefault() from MDN Web Docs
From your post, it looks like you are not referencing any JavaScript libraries (such as jQuery)... so a straight up JavaScript approach would be:
document.querySelector("#printLink").addEventListener("click", function(event) {
event.preventDefault();
//your printing related window code etc.
}, false);
If, however, you are using a JavaScript library and it happens to be jQuery, then the following will be what you are looking for--
jQuery("#printLink").click(function(e) {
e.preventDefault();
//your printing related window code etc.
});
jQuery event.preventDefault()
In either case, your print link would look like:
<a id="printLink" ...></a>
(Notice the ID attribute in the anchor element)
I have a from I added a event listener to for the submit event like this:
form.addEventListener('submit',function(event){
event.preventDefault();
/*some few hundred more lines*/
},false);
My issue is when I use this bit of js later on:
from.dispatchEvent(new Event('submit'));
The function is processed, but the page is reloaded because preventDefault() had no effect, how can a dispatch a event and not trigger the default?
1) you also need e.stopPropogation(), and even though it's redundant these days, to cope with old IE, it's good form to return 0 at the end
2) practically speaking, just stop making the button a submit button. submit explicitly means "send to the other end." just handle the button's onclick instead.
Setting the action on the form to javascript:void(0); instead of # worked.
As an exercise, I'm trying to add an event listener to an ebay.com element.
Expected result: show an alert and stop the web page from going to the next URL.
What happens: the alert is shown but the next URL is shown anyway.
I found something interesting on the product pages where I'm testing out preventDefault, stopPropagtion and stopImmediatePropagation.
No matter which combinations I use, nothing seem to work.
The basic code is:
$('#binBtn_btn').click(function(evt){
alert('hi');
evt.stopPropagation(); //or any other option.
});
The thing is that I get the alert, but it still goes to the next page, as if I never stopped the propagation.
I read a lot of articles about event handling, but I couldn't find the answer.
Your help is much appreciated.
My best guess it that the Button has its own click handler, and it's firing before yours.
$('#binBtn_btn').data("events") shows us that there is indeed a click event. Remove that using off.
$('#binBtn_btn').off('click');
Clicking the button now will still cause the form the submit, as all we're doing is browsing to a page. The button is actually just an a tag.
$('#binBtn_btn').click(function(e){
alert('Gotcha!');
e.preventDefault();
});
Let's see what happens if we remove their handler, add ours, and then re-add their one...
var existing = $('#binBtn_btn').data('events').click[0];
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); return false; });
$('#binBtn_btn').data('events').click.push(existing);
Same, but just looking at the function for the click handler (rather than tweaking the events.click array directly...)
var existing = $('#binBtn_btn').data('events').click[0].handler;
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); e.preventDefault(); });
$('#binBtn_btn').click(existing);
As expected, what is now the second handler -- their handler -- doesn't first. (I've added a return false; rather than e.preventDefault();, just to demonstrate different ways of doing things!)
You can check out what they're doing by placing a breakpoint and viewing the existing var above. You'll see that at the end of their function, they do indeed call e.preventDefault();.
Hope this helps.
try using evt.preventDefault() like this:
$('#binBtn_btn').click(function(evt){
evt.preventDefault();
alert('hi');
});
Then it will not go to the next page.
Basically I have an anchor element, <a href='bla..'>link</a>
On click, I first want to do something and only once it's done I want to take the user to the page that it links to. Something like:
$('a').click(function(ev){
ev.preventDefault();
//do something here
ev.refireDefault();
});
Any suggestions?
Update
My apologies! My FireFox decided to cache the previous version of JS, so nothing that I tried worked until a simple CTRL+F5 solved the issue.
Javascript is not multi-threaded. It is event driven and events fire in the order in which you load them. Therefore, if you simply leave out the ev.preventDefault() in your click event altogether, it won't fire the default action until the function exits.
See jsFiddle here
EDIT per #Greg's comment:
The only scenario in which the above is not true is with asynchronous functions. In that scenario you would want to prevent the default action first and then in the asynchronous callback function, re-fire the default action.
preventDefault marks the event as handled so that when your click function exits, the default action isn't taken. If you don't call preventDefault then the default click action won't get called until your click function exits. So remove it and it'll work as you are suggesting.
The link will not go till after the work is done, so you can do:
$('a').click(function(ev){
//do something here
});
after performing your desired action why don't you just redirect it to the page by adding this line:
window.location = 'welcome.php';
It can be done like this:
<a onclick="JavaScriptCodeHere; return true;" href='bla..'>link</a>
1) The onclick needs to be before the href.
2) return true; makes sure that user will be taken to the linked page after your JS code executes. If you use return false; - linked itself will not work, it will just fire your JavaScript on click;
I have added an onclick event, which opens a new tab/page, to a button which has an action already (I don't know which action cause it isn't displayed in source, or maybe it's a form submit action).
Button originally also opens a page in new tab, what I want to do is fire up some function after my onclick attribute executes which will stop execution and that default page opening will not happen, only my page will load.
Is there something that can be done?
It sounds like the event is bubbling up after you have handled it. To stop this happening, add event.cancelBubble = true at the end of your handler.
Using jQuery, you can do this:
$('button').click(function() {
//do something
return false; // stop the event from propagating
});
Try getting your function that your call on the onclick event to return false. This will cause any existing action by the button to be overridden
If the handler was set using 'onclick=' you can simply rewrite the onclick property.
If a handler was added to an element with addEventHandler or attachEvent, you can remove it with removeEventHandler or detachEvent, using the same parameters that were used to set it.
If you don't know the setter, or if it used an anonymous function, you can't remove it.
You could replace the element with a duplicate that has no events and set your own on the new element.
(cloneNode is not supposed to clone events, but it sometimes does in some browsers.)