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. php使用pthreads v3多线程的抓取新浪新闻信息

    我们使用pthreads,来写一个多线程的抓取页面小程序,把结果存到数据库里. 数据表结构如下: CREATE TABLE `tb_sina` ( `id` int(11) unsigned NOT ...

  2. TortoiseSVN设置Beyond Compare为版本比较、差异合并工具

    打开乌龟的setting==>Diff Viewer 比较"D:\develop\Beyond Compare 4\BCompare.exe" %base %mine /ti ...

  3. mysql命令行导入结构化数据

    数据样本 103252765-|--|-stephanie_mt@hotmail.com-|-o/35+nGaNEU=-|-ion|-- 其中|为分隔符,每行的换行符\n mysql -uroot M ...

  4. Oracle_高级功能(4) 数据库存储结构

    数据库存储结构分为:物理存储结构和逻辑存储结构.物理结构和逻辑结构分开,对物理数据的存储不会影响对逻辑结构的访问.1.物理存储结构 数据库文件 os block2.逻辑存储结构 tablespace ...

  5. （转）数组使用contains

    数组使用contains 今天发现一个怪问题,同样是.net3.5环境下的两个项目,一个里支持arr.contains("1"),一个就不支持,代码完全相同也不行.有时在不支持项目 ...

  6. iOS.Objective-C.Dependency.Graphing-v0.1

    当Project越来越复杂,模块间的依赖就会很复杂,不合理的依赖就出现:不必要的依赖,双向依赖等等. 在iOS Application Project中可以将依赖定义为:对某个头文件的import. ...

  7. 十年百度工作心得（月薪75k）

    百度,是多少从事IT事业的程序员梦寐以求的地方,能进入这样大厂的程序员可以说都是数一数二的人才. 最近有不少朋友问,成为百度,腾讯,阿里Java架构师需要系统学习哪些Java技术. 下面分享互联网Ja ...

  8. MySQL学习笔记-数据库文件

    数据库文件 MySQL主要文件类型有如下几种 参数文件:my.cnf--MySQL实例启动的时候在哪里可以找到数据库文件,并且指定某些初始化参数,这些参数定义了某种内存结构的大小等设置,还介绍了参数类 ...

  9. UI设计教程分享：设计一个高质量的logo要从哪方面入手呢？

    有的人觉得logo只是一个简单的图形,对品牌影响无关紧要:但有的人却觉得logo对品牌有较大的影响.其实logo承载着一个公司的品牌形象.公司背景.公司理念等.就像Landor往往给一个企业做logo ...

  10. socket 长连接

    实现: 长连接的维持,是要客户端程序,定时向服务端程序,发送一个维持连接包的. 如果,长时间未发送维持连接包,服务端程序将断开连接. 服务端: 由于客户端会定时(keepAliveDelay毫秒)发送 ...