Updated April 18, 2023
Introduction to jQuery click preventDefault
The jQuery click preventDefault is one of the default methods to handle the events like cancelling function or triggering the new events because the default user action is not belongs to the any of the events that it does not cancel all events by using the cancellable property to find out the events by using the preventDefault() method. It does not prevent the further propagation for events through the DOM elements with the help of stopPropagation() method this process will be stopped and click event is used to triggering the events it must be the exact series of user event functionality.
Syntax:
The click is the event and preventDefault() is the built-in method to handle the events with some prevents for further propagations. Like that the method is called and combined through the other default methods for to triggering the events that related to the user functionality of the application.
<html>
<head>
<script src=" https://code.jquery.com/jquery-3.5.0.js">
$(document).ready(function(){
$('variable name').click(function(var)){
var.preventDefault();
----some jQuery and javascript codes it depends upon the user requirement----
});
})
</script>
<body>
---some html tag elements which may require on the jQuery tag libraries and the application UI requirement-----
</body>
</html>The above codes are the basic syntax for using the click() and preventDefault() methods for to handling the events. We use on() method passing the “click” event and “handler” arguments on the script.
How to use click preventDefault in jQuery?
When we use click event on the script it calls and trigger the new events or existing operator is to be performed by the user end. If any of the default methods are called and used with any default actions the event is not triggered and also the preventDefault() method does not accept any arguments from the coder side. With the help of event.isDefaultPrevented() method to determine the method has been called by the event handler that was triggered by the user events. The click even is occurred and performed when the element is clicked and the click() method is used to triggered the click event or attached the function to run and execute the click events. The HTML DOM elements are prevented and utilised with the javascript libraries like jQuery is handled and triggered the new events occurs when every time the function is called by the user end. The click() method allows for passing the eventData and handler, the object it contains the data that can be passed to the specific event handler that allows the eventData and the handler function is used to execute each time the event is triggered from the event object. When we use any method it may be the default or customized one the signature may be accept both arguments or it does not support it.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
</script>
<meta charset=utf-8 />
<title>Welcome To My Domain it’s a demo Example For click preventdefault() method</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"
>
(function ($) {
"use strict";
$(document.body).delegate('[type="checkbox"][readonly="readonly"]', 'click', function(e) {
e.preventDefault();
});
$('#demo').submit(function(e) {
$('.third').demo().html($(this).serialize());
return true;
});
}(window.jQuery));
</script>
</head>
<body>
<form action="about:blank" id="demo">
<h3>First Check box</h3>
<input type="checkbox" value="ex1" name="ex1" />
<input type="checkbox" checked="checked" value="ex2" name="ex2" />
<h3>Second Check box </h3>
<input type="checkbox" value="ex3" name="ex3" disabled="disabled" />
<input type="checkbox" checked="checked" value="ex4" name="ex4" disabled="disabled"/>
<h3>Third Check box</h3>
<input type="checkbox" readonly="readonly" value="ex5" name="ex5" />
<input type="checkbox" checked="checked" readonly="readonly" value="ex6" name="ex6" />
<h3>Fourth check box</h3>
<p>
<label>
<input type="checkbox" checked="checked" readonly="readonly" value="eg7" name="eg7" disabled="disabled"/>
<p>Thank You users for spending the time</p>
</label></p>
<h3>Fifth check box</h3>
<div>
<input type="checkbox" checked="checked" readonly="readonly"
id="demo1" value="eg8" name="eg8" disabled="disabled" />
<p>
<label for="demo1">Please continue your work with our Application its more helpful for your side <code>Nice Day</code>
</label>
</p>
</div>
<input type="submit" name="Show Me" value="Show Me" />
</form>
<pre class="demo2">
</pre>
<a id="news" href="http://www.google.com/">Click the button to displayed it on the web page</a>
<pWe used preventDefault() method for handling the events</p>
<script>
document.getElementById("demo2").addEventListener("click", function(event){
event.preventDefault()
});
</script>
</body>
</html>Sample Output:
In above example, we used HTML checkbox elements to perform and used the read-only and disabled attributes on the HTML elements. Here we used addEventListener() function for “click” the events and preventDefault() function for triggered the events.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
body {
width: 44%;
height: 44%;
padding: 27px;
border: 3px solid blue;
font-size: 26px;
}
input {
width: 177px;
height: 47px;
border-radius: 14px;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function(event) {
event.preventDefault();
alert("Thank you for submitting your datas on our application your request is taken from our end hence we have authenticated and revert us");
});
});
$(document).ready(function() {
$("a").click(function(event) {
event.preventDefault();
alert("Your request is not approve now please try again later");
});
});
</script>
</head>
<body>
<input type="text" placeholder="Please enter your input strings" />
<br><br>
<button>Show Me Results </button>
<a href="http://www.google.com">
Welcome To My Domain its a second Example for click preventdefault() methods
</a>
</body>
</html>Sample Output:
In second example we used the text box Html UI element and we have inserted the values and it will be stored on the backend. We used <a href> tag for utilising and navigating the web page. The preventDefault() method is used for performing the event functions.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
alert("Your request is not approve now please try again later");
});
});
</script>
</head>
<body>
<h4> Welcome To My Domain its a third example for click preverDefault() method </h4>
<p> Have a Nice day users thank you for spending your valuable time in our application. </p>
<a href = "https://www.google.com/"> Show me your results </a>
</body>
</html>Sample Output:
The final example we used same click() function to execute and perform the user events. The preventDefault() is the method for which to execute and navigate the web pages. By using alert() function we have received the notification.
Conclusion
In jQuery click preventDefault() methods are used for handling the user events and navigate the web pages if the pages is prevent with security like firewall it cannot be allowed the specific pages. It supports all type of browsers with upgraded versions also it supports both pc machine and other devices like tablet and mobile phone applications.
Recommended Articles
This is a guide to jQuery click preventDefault. Here we discuss the Introduction, How to use click preventDefault in jQuery? examples with code implementation respectively. You may also have a look at the following articles to learn more –
