jquery取消事件冒泡的三种方法展示

html代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>阻止冒泡</title>

<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

    // 为span元素绑定click事件

    $('span').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息

        $('#msg').html(txt);// 设置html信息

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

</head>

<body>

问题一：当我们点击“span”时会触发“div”和“body”的事件，如何只触发单一点击事件不触发到父节点点击事件呢？修改：在各点击事件结尾加上stopPropagation()会阻止触发上一节点事件;

修改如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

    // 为span元素绑定click事件

    $('span').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息

        $('#msg').html(txt);// 设置html信息

		event.stopPropagation()

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

		event.stopPropagation()

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

</head>

<body>

<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div>

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

</body>

</html>

问题二：表单没有通过验证阻止表单提交，这时候可以通过设置event.preventDefault(); 阻止默认行为 ( 表单提交 )。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</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>文本框的值不能为空.</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>

第三种阻止冒泡方式 return false：实际上这个很通用但是内部是执行了　(1)event.preventDefault();

(2)event.stopPropagation();

(3)停止回调函数执行并立即返回;这三个动作我们需要根据实际情况选择阻止冒泡的方式

秒客网

jquery取消事件冒泡的三种方法展示

相关文章