Back to: jQuery Tutorials
jQuery Prevent Default with Examples
In this article, I am going to discuss jQuery Prevent Default with Examples. In our previous articles, we have discussed How to Execute Event Only Once using jQuery. At the end of this article, you will understand everything about jQuery Prevent Default.
jQuery Prevent Default
In this article, we will learn how to prevent this default behavior of the browser. First, let’s look at some of the browser default actions. For example.
- When you right-click on a web page or any link on the web page, the browser displays the context menu
- When you click on a link, the browser navigates to the page specified in the link
In some situations, you may want to prevent these default actions of the browser. For example, some of the websites prevent you from right-clicking on the page. Disabling right-click is annoying users. Many people say they disabled right-click for security reasons because they do not want their content to be copied. But if you disable JavaScript in the browser, you will still be able to right-click and copy the content. So, you are achieving nothing by disabling right-click.
Let us now discuss, how to achieve this using jQuery. We have already learned the event object. When you will pass that event object as a parameter of any callback of event binding function then you have a built-in property on that event object i.e. event.preventDefault().
event.preventDefault()
If this method is called, the default action of the event will not be triggered.
Parameters: This method does not accept any arguments.
Example: jQuery event.preventDefault()
In the below example, notice that in the 1st hyperlink we have used the prevent default method and we are appending that text in p#Result. So if you click on the 1st hyperlink that will not be redirected. It will just show the text. But when you click on the second button, it will redirect to the URL.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
a {
background-color: #1c4450;
border: none;
outline: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
a:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuery Prevent Default</h1>
<div class="container">
<a href="https://www.google.com/" id="prevent">www.google.com(Prevent Default)</a>
<a href="https://www.google.com/">www.google.com</a>
<p id="Result"></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#prevent").click(function (event) {
event.preventDefault();
$("#Result").append(
"Default action of the hyperlink is prevented here</br>"
);
});
});
</script>
</body>
</html>
Now run the above code and click on the First button, you will see that it will not redirect to the google home page and show the text as shown in the below image.
But when you click on the 2nd hyperlink it will work as usual and navigate to the following page.
Example: Disabling Right Click using jQuery
In the below example, notice that in the 1st hyperlink we have used the prevent default method and we are appending that text in p#Result. So if you right-click on the 1st hyperlink that will not show the context menu. It will just show the text on the result id
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
a {
background-color: #1c4450;
border: none;
outline: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
a:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuery Prevent Default</h1>
<div class="container">
<a href="https://www.google.com/" id="prevent">First Hyperlink(Prevent Default)</a>
<a href="https://www.google.com/">Second Hyperlink</a>
<p id="Result"></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#prevent").contextmenu(function (event) {
event.preventDefault();
$("#Result").append(
"Default action of the context menu is prevented here</br>"
);
});
});
</script>
</body>
</html>
Now run the above code and then right-click on the first link and the context menu will not be shown and you will see the appended text as shown in the below image.
But if you right-click on the 2nd hyperlink it will show the context menu as expected as shown in the below image.
In the next article, I am going to discuss the jQuery Scroll Event with Examples. Here, in this article, I try to explain jQuery Prevent Default with Examples and I hope you enjoy this jQuery Prevent Default article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.