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取消事件冒泡的三种方法展示的更多相关文章

  1. jquery取消事件冒泡的三种方法(推荐)

    1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: ? 1 2 3 4 5 6 7 8 9 10 11 $("form").bind(   "s ...

  2. Html 中阻止事件冒泡的三种方法比较

    A:return false --->In event handler ,prevents default behavior and event bubbing .         return ...

  3. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  4. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  5. Android监听点击事件实现的三种方法

    监听点击事件实现的三种方法:1.匿名内部类2.外部类3.直接实现接口 1.匿名内部类: package com.jereh.calculator; import android.content.Con ...

  6. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  7. jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)

    1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...

  8. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  9. jquery取消事件冒泡和取消默认行为

    $('button').click(functon(e){ /*code*/ e.stopPropagation();//取消事件冒泡 e.preventDefault();//取消默认行为 })

随机推荐

  1. 利用dom4j读写XML

    public static HashMap<String, String> ReadConfig() { HashMap<String, String> map=new Has ...

  2. mysql8 公用表表达式CTE的使用

    公用表表达式CTE就是命名的临时结果集,作用范围是当前语句. 说白点你可以理解成一个可以复用的子查询,当然跟子查询还是有点区别的,CTE可以引用其他CTE,但子查询不能引用其他子查询. 一.cte的语 ...

  3. 解决织梦替换ueditor编辑器后栏目与单页无法保存内容

    织梦的默认编辑器是ckeditor,没有插入代码的功能,不够强大,就换成了百度的UEditor编辑器. 使用织梦DedeCMS百度整合UEditor编辑器时,碰到了栏目内容或者单页无法保存的问题,这个 ...

  4. CentOS 7系统关闭yum自动下载更新

    安装CentOS 7后,系统yum自动更新状态默认为开启,若禁止系统自动更新需要手动关闭. 1.进入yum目录 [root@localhost ~]$ cd /etc/yum 2.编辑yum-cron ...

  5. hdu 5491(2015合肥网赛)The Next

    题目;http://acm.hdu.edu.cn/showproblem.php?pid=5491 题意就是,T组测试数据.然后L,S1,S2.L的二进制中有x个1,x满足  S1<=x< ...

  6. linux查看文件被哪个进程占用？

    1> 如果文件是端口号 netstat -ntlp | grep portNum [root@localhost root]# netstat -ntlp Active Internet con ...

  7. fedora25的免密码rsync服务配置

      目标:实现免密同步数据: 1.安装rsync包: 2.手工添加配置文件: cat  /etc/rsyncd.conf # See rsyncd.conf man page for more opt ...

  8. BZOJ1912或洛谷3629 [APIO2010]巡逻

    一道树的直径 BZOJ原题链接 洛谷原题链接 显然在原图上路线的总长为\(2(n-1)\). 添加第一条边时,显然会形成一个环,而这条环上的所有边全部只需要走一遍.所以为了使添加的边的贡献最大化,我们 ...

  9. Sliding Window Maximum LT239

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  10. Imageview 按比例适应屏幕大小

    DisplayMetrics dm = new DisplayMetrics();//取得窗口属性getWindowManager().getDefaultDisplay().getMetrics(d ...