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取消事件冒泡的三种方法展示的更多相关文章
- jquery取消事件冒泡的三种方法(推荐)
1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: ? 1 2 3 4 5 6 7 8 9 10 11 $("form").bind( "s ...
- Html 中阻止事件冒泡的三种方法比较
A:return false --->In event handler ,prevents default behavior and event bubbing . return ...
- C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- Android监听点击事件实现的三种方法
监听点击事件实现的三种方法:1.匿名内部类2.外部类3.直接实现接口 1.匿名内部类: package com.jereh.calculator; import android.content.Con ...
- jquery动态加载js三种方法实例
这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...
- jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)
1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- jquery取消事件冒泡和取消默认行为
$('button').click(functon(e){ /*code*/ e.stopPropagation();//取消事件冒泡 e.preventDefault();//取消默认行为 })
随机推荐
- RESTful接口规范
一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...
- Vue 进度条 和 图片的动态更改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 8I - 吃糖果
HOHO,终于从Speakless手上赢走了所有的糖果,是Gardon吃糖果时有个特殊的癖好,就是不喜欢将一样的糖果放在一起吃,喜欢先吃一种,下一次吃另一种,这样:可是Gardon不知道是否存在一种吃 ...
- Canvas绘图 （html5新增特性）
Canvas 使用<canvas>对象,需要设置属性:width,height.指定绘图的区域大小.在canvas标签前后出现的信息将在不支持<canvas>元素的浏览器中显示 ...
- BPF+XDP比较全的资料都在这里
Dive into BPF: a list of reading material Sep 1, 2016 • Quentin Monnet◀Table of contents What is BPF ...
- git分支切换时的时间戳问题
1.为什么git仓库没有保留文件修改时的时间戳? 摘自:https://git.wiki.kernel.org/index.php/Git_FAQ#Why_isn.27t_Git_preservin ...
- sex在软件开发中的运用--SIX技术
开篇:省略xxx字 keyword:sex . female, male .SIX ,sex integer extention technolgolsl 前言: 对于sex字段的研究,国内,国际尚为 ...
- Ubuntu安装R及R包
安装R $sudo apt-get update $sudo apt-get install r-base $sudo apt-get install r-base-dev 安装一些可能的依赖包 $s ...
- 【算法专题】工欲善其事必先利其器—— 常用函数和STL
一. 常用函数 #include <stdio.h> int getchar( void ); //读取一个字符, 一般用来去掉无用字符 char *ge ...
- Javascript短路运算||和&&
1.只要“||”前面为false,无论“||”后面是true还是false,结果都返回“||”后面的值. 2.只要“||”前面为true,无论“||”后面是true还是false,结果都返回“||”前 ...