Three ways to cancel event bubbling in jquery

html code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stop bubbling</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
    // Bind the click event for the span element
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>The inner span element is clicked.<p/>";//Get html information
        $('#msg').html(txt);// Set html information
    });
    // bind the click event to the div element
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>The outer div element is clicked.<p/>";
        $('#msg').html(txt);
    });
    // Bind the click event to the body element
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body element was clicked.<p/>";
        $('#msg').html(txt);
    });
})
</script>
</head>
<body>

Question 1: When we click on "span", the events of "div" and "body" will be triggered. How to trigger only a single click event without triggering the click event of the parent node? Modification: Adding stopPropagation() at the end of each click event will prevent the previous node event from being triggered; the
modification is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled document</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
    // Bind the click event for the span element
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>The inner span element is clicked.<p/>";//Get html information
        $('#msg').html(txt);// Set html information
		event.stopPropagation()
    });
    // bind the click event to the div element
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>The outer div element is clicked.<p/>";
        $('#msg').html(txt);
		event.stopPropagation()
    });
    // Bind the click event to the body element
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body element was clicked.<p/>";
        $('#msg').html(txt);
    });
})
</script>
</head>

<body>
<div id="content"> outer div element <span> inner span element</span> outer div element</div>

<div id="msg"></div>
</body>
</html>

Question 2: The form does not pass validation to prevent form submission. At this time, you can prevent the default behavior (form submission) by setting event.preventDefault();.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled document</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>

<script>
$(function(event){
	$("form").submit(function(){
		if($("input[name='username']").val()==''){
			event.preventDefault();
			$("#msg").html("<p>The value of the text box cannot be empty.</p>");
					alert("123")
			}
		})
	})
	
</script>
</head>

<body>

<form action="www.baidu.com">
	<input name="username">
	<input type="submit" value="提交">
</form>
<div id="msg"></div>
</body>
</html>

The third way to prevent bubbling returns false: In fact, this is very common but internally (1) event.preventDefault();
(2) event.stopPropagation();
(3) stop the callback function execution and return immediately; this Three actions we need to choose the way to prevent bubbling according to the actual situation

Three ways to cancel event bubbling in jquery

Guess you like