? jQuery preventDefault() & stopPropagation()

? Quick Overview

In jQuery, preventDefault() and stopPropagation() are used to control event behavior. They help you stop unwanted browser actions and control how events flow through the DOM.

? Key Concepts

• Default Action → Browser’s built-in behavior (link navigation, form submit)
• Event Bubbling → Event moves from child to parent
• preventDefault() → Stops default browser action
• stopPropagation() → Stops event bubbling

? Syntax / Theory

• event.preventDefault() stops browser action
• event.stopPropagation() stops bubbling
• Both are commonly used inside jQuery event handlers

? Code Example(s)

// Prevent default link navigation
$("#myLink").on("click", function(event) {
event.preventDefault();
alert("Link click prevented");
});

// Stop event bubbling to parent elements
$(".child").on("click", function(event) {
event.stopPropagation();
alert("Child clicked only");
});

? Live Output / Explanation

? Interactive Example

// Interactive example using both methods
$("#box").on("click", function() {
alert("Box clicked");
});

$("#button").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
alert("Button clicked only");
});

? Use Cases

• Stopping form submission for validation
• Preventing page reload on button clicks
• Controlling nested click handlers
• Building custom UI interactions