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. console框脱离eclipse窗口

    解决方案: 直接将视图重置. 在eclipse主窗口的最上层选项中,点击“window”选项,找到其中的“Reset Perspective”选项,点击确认即可.即视图重置.

  2. shell脚本小集锦

    1) 如何向脚本传递参数 ? ./script argument 例子: 显示文件名称脚本 ./show.sh file1.txt cat show.sh #!/bin/bash 2) 如何在脚本中使 ...

  3. 31-java中知识总结：list, set, map, stack, queue

    import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import java.util.Lin ...

  4. 用Python监听鼠标和键盘事件

    PyHook是一个基于Python的“钩子”库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个Python库PyWin32,如同名字所显示的,PyWin32只能运行在Windows平台,所 ...

  5. WorkerMan源码分析 - 实现最简单的原型

    之前一直认为workerman源码理解起很复杂,这段时间花了3个下午研究,其实只要理解 php如何守护化进程.信号.多进程.libevent扩展使用,对于如何实现就比较轻松了. 相关代码都在githu ...

  6. Js 怎么遍历json对象所有key及根据动态key获取值（根据key值获取相应的value值）

    Js代码 <script type="text/javascript"> getJson('age'); function getJson(key){ var json ...

  7. maven工程的拆分与聚合

    1.创建父工程: 首先创建maven Project: 点击next,进入下一个页面,勾选上create a simple project: 点击next,进入下一页面,在这里与创建普通maven工程 ...

  8. Vim完全教程

    一.简介 世界上只有三种编辑器,EMACS.VIM和其它.   我们所处的时代是非常幸运的,有越来越多的编辑器,相对于古老的VIM和EMACS,它们被称为现代编辑器.我们来看看这两个古董有多大年纪了: ...

  9. mtcp的快速编译（连接）

    mtcp的快速编译 http://mos.kaist.edu/guide/config/03_build_mtcp.html 介绍DPDK中使用mtcp的文档 https://dpdksummit.c ...

  10. jsonp，ajax，json问题

    JSONP技术 JSONP是解决跨域问题的一种常见方式 跨域问题,因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题 同源策略:只有在同协议.同域名.同端口的情况下才能进去数据交互 ...