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. how2j网站前端项目——天猫前端（第一次）学习笔记7

    开始学习结算页面 结算页面分为3个部分学习:1.简单的头部和收货地址 2.较为复杂的确认订单信息 3.交互 一.简单的头部和收货地址 根据站长的图片,自己模仿着做了一下,刚开始没有想到填写信息的4个框 ...

  2. Vue 1.0 和 2.0 执行顺序

    // Vue 生命周期 // Vue 1.0 // 执行步骤:选项/生命周期钩子 // 1 init // 2 created // 3 beforeCompile // 4 compiled // ...

  3. C# fckeditor浏览服务器和上传目录不一致，看不到上传过的文件

    fckeditor在上传标签页面,传过文件后,在浏览服务器那里,看不到之前上传的文件,通过浏览服务器页面上传文件,保存的目录也和上传标签页面上传的不是同一个文件夹. 修改方法如下: 打开fckedit ...

  4. PHP 弹窗 源代码 css Jquery.js

    // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idzt[x] = " ...

  5. docker 运行 elasticsearch + kibana

    一.elasticsearch的安装 1.从官网上拉取 elasticsearch 的镜像 docker pull elasticsearch:5.6.11docker images 2.运行容器 m ...

  6. 使用limma、Glimma和edgeR，RNA-seq数据分析易如反掌

    使用limma.Glimma和edgeR,RNA-seq数据分析易如反掌 Charity Law1, Monther Alhamdoosh2, Shian Su3, Xueyi Dong3, Luyi ...

  7. Codeforces 757C. Felicity is Coming!

    C. Felicity is Coming! time limit per test:2 seconds memory limit per test:256 megabytes input:stand ...

  8. 终于搞定Fastreport2.x PDF输出，相信其他版本也差不多

    这个版本有powerpdf可以支持,但有bug, 经过反复摸索,终于搞定. 基本可用. 主要是中英文混合在一起,如果按中文输出,会有英文宽度也是中文的宽度了,格式变化,不可 接受. 而按英文输出,又是 ...

  9. 看看用PS来转基因的动物，居然很欢乐！！

    出于礼貌,我先笑一下,哈哈哈哈哈哈!好了,开始.Gyyporama是挪威的一名程序员,他无聊的时候会从网上找来一些动物的图片,把他们的头和身体进行混合,生成另一种奇怪的动物.然后邀请其他网友过来给他们 ...

  10. [SoapUI] 判断工程下某个文件是否存在，存在就删除

    def excelName = "AllTests-Fails" String projectPath = context.expand( '${projectDir}' ) St ...