Skip to main content

Stop Actions with jQuery .preventDefault()

By Sam Deering



😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

Because the action is not followed we may need to know when the user prompted the action and can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event. This can be used to trigger a function call. Could also be useful for dynamic URL’s with XHtmlRequest in jQuery to fetch a page with a module for example href=”index.php?page=contact instead of contact.php. You may also want to look at MOD Rewrite options which can also provide this functionality and SEO goodness. jQuery Stop Event Functions. Watch out if you’re using $(document).bind(“keydown keypress”, function(event) then e.preventDefault() won’t work try.. event.preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink but you don’t want it to process and open the link but only call a javascript function say. Fortunately there is a function in jQuery to stop the hyperlink action.

jQuery Preventdefault Function Demo

Example 1 – Prevent and catch a hyperlink click

< !DOCTYPE html>


default click action is prevented

Example 2 – Prevent form submit button

$('#myform').submit(function(event) {
	var self = this;
	window.setTimeout(function() {
	}, 2000);

Example 3 – Delay hyperlink target until after animation effect

	event.preventDefault(); // prevents link to be redirected
	var time = 1000; // time for slideup effect
	var url = $(this).attr("href"); // pick url for redirecting via javascript

	$("#ELEMENT_TO_SLIDE_UP").slideUp(time); // effect
	window.setTimeout(function(){document.location.href=url;}, time); // timeout and waiting until effect is complete
	return -1;

Example 4 – Disable keydown scroll button

	// Move Down
	if(event.keyCode == '40'){
		var posY = $('#'+selectedTxtID).css('top');
		posY = parseFloat(posY);
		var newPosY = posY + 1;
		$('#'+selectedTxtID).css('top', newPosY+'px');

This function can also be used not only on hyperlinks but anything that has a default action you wish to prevent.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *

🤓 Ok. When did a code editor from Microsoft become kinda cool!?