JQuery methods event.preventDefault() and event.isDefaultPrevented() can be used to prevent default action of that element.
If you are using a tag and your client say that it should not perform navigation or if you are using a button and you think, it should not perform click event, then JQeury has a solution for you. Simply use event.preventDefault() to prevent default action behavior and event.isDefaultPrevented() to check if your changes are applied or not.
Below is the use of preventDefault() method. I am applying it on a tag and it will not let it navigate to desired url.
$("a").click(function(event){
event.preventDefault();
});
Below is the use of isDefaultPrevented() method. It will check if changes applied or not.
$("a").click(function(event){
event.preventDefault();
alert("Is preventDefault() applied: " + event.isDefaultPrevented());
});
Here is the sample code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
console.log(event.isDefaultPrevented());
});
});
</script>
</head>
<body>
<a href="http://dotnet-concept.com/">Dot Net Concept</a>
<p>The preventDefault() method will prevent the link to navigate to the URL and isDefaultPrevented() method tells that change has been applied successfully.</p>
</body>
</html>
Hope it helps you.
