Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>preventDefault / stopPropagation</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>#outer{padding:16px;border:1px solid #ccc;} #inner{padding:16px;border:1px dashed #999;}</style> </head> <body> <div id="outer">Outer <div id="inner">Inner <a id="lnk" href="https://example.com">link</a></div> </div> <pre id="out"></pre> <script> $("#outer").on("click", function(){ $("#out").append("outer click\n"); }); $("#inner").on("click", function(e){ $("#out").append("inner click\n"); /* e.stopPropagation(); */ }); $("#lnk").on("click", function(e){ e.preventDefault(); $("#out").append("link clicked (default prevented)\n"); }); </script> </body> </html>
Output