Why does preventDefault() on a parent element’s click ‘disable’ a checkbox ?
Last Updated :
17 Mar, 2023
JavaScript preventDefault() is a method that is used to prevent the default behavior of an event. It stops it from happening. It is used while form submissions or link clicks, to stop the default action, such as navigating to a different page or submitting a form from happening. The method is called on an event object and is used within an event handler function.
JavaScript preventDefault() method:
- When we click on a link, it prevents the link from following the URL.
- When we click on a checkbox, it prevents toggling of the checkbox.
- When we click on the “Submit” button, it prevents it from form submitted.
Note: Not all events are cancelable. We use cancelable property to find out if an event is cancelable.
Why does preventDefault() on a parent element’s click ‘disable’ a checkbox?
- Preventing the default behavior of a parent element’s click event can have an impact on the behavior of child elements, such as checkboxes, within that parent element. This occurs because of the event bubbling and capturing mechanism of JavaScript.
- When an event is triggered on a DOM element, it first captures the event from the top of the DOM tree to the bottom, then it bubbles the event back up to the top. The preventDefault() method stops the bubbling of the event to the parent elements and prevents the default behavior from occurring.
- In the case of a checkbox, the default behavior is to toggle its state when it’s clicked. However, if the parent element’s click event has preventDefault() called on it, the bubbling of the event to the checkbox is prevented and the checkbox will not toggle. This can cause unexpected behavior and make the checkbox appear to be “disabled”.
- To avoid this issue, it’s important to consider the implications of preventing the default behavior on parent elements, especially when working with checkboxes or other interactive elements. If it’s necessary to prevent the default behavior on a parent element’s click event, you can use event delegation to target the specific child element and prevent its default behavior.
Syntax:
event.preventDefault();
Now, let us understand with the help of some examples.
Example 1: This example is shown without using JavaScript PreventDefault() method on the parent.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
padding-top: 10rem;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>PreventDefault()</h2>
<div onclick='Parent()'>
<input type="checkbox" onclick="Child()">
Try to check the box
</div>
<script>
function Child() {
alert('checked ? Yes');
}
function Parent() {
alert('parent Clicked');
}
</script>
</body>
</html>
|
Output:
Example 2: This example is shown without using JavaScript with PreventDefault() on the parent.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
padding-top: 10rem;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>PreventDefault()</h2>
<div onclick='Parent()'>
<input type="checkbox" onclick="Child()">
Try to check the box
</div>
<script>
function Child() {
alert('checked ? No');
}
function Parent() {
event.preventDefault();
alert('parent Clicked');
}
</script>
</body>
</html>
|
Output:
In conclusion, the preventDefault() method can cause a checkbox to appear “disabled” because it stops the event from bubbling to the checkbox and prevents its default behavior from occurring. This can be avoided by carefully considering the implications of preventing the default behavior on parent elements and using event delegation to target specific child elements when necessary.
Share your thoughts in the comments
Please Login to comment...