Stop Actions with jQuery .preventDefault()

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

  



default click action is prevented

Example 2 – Prevent form submit button

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

Example 3 – Delay hyperlink target until after animation effect

$("#ELEMENT_WHICH_AFFECT_THE_SLIDEUP")
.click(function(event){
	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

$(document).keydown(function(event){
	// Move Down
	if(event.keyCode == '40'){
		event.preventDefault();
		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.