JQuery阻止冒泡事件on绑定中异常情况分析
事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为。
<body>
<a id="p" href="http://www.baidu.com" target="_blank">我是超级链接<button id="sub">子按钮</button></a>
<div id="text">
</div>
</body>
<script>
$(function(){
$("#p").click(function(event){
$("#text").append("<p>父亲元素被点击</p>");
}) $("#sub").click(function(event){
$("#text").append("<p>子元素被点击</p>");
event.stopPropagation(); //只阻止了冒泡事件， 默认默认行为没有阻止 })
})
</script>
<script>
$(function(){
$("#p").click(function(event){
$("#text").append("<p>父亲元素被点击</p>");
}) $("#sub").click(function(event){
$("#text").append("<p>子元素被点击</p>");
event.preventDefault(); //只阻止了默认事件，冒泡事件没有阻止
})
})
</script>
event. preventDefault()加上后，有阻止了默认行为，没有打开新的href窗口，但是没有阻止冒泡事件，父亲的click还是触发了：
3：return false;
<script>
$(function(){
$("#p").click(function(event){
$("#text").append("<p>父亲元素被点击</p>");
}) $("#sub").click(function(event){
$("#text").append("<p>子元素被点击</p>");
return false; //冒泡事件和默认事件都阻止
})
})
</script>
return false加上后既没有冒泡，也没有打开新窗口：
<body id="body">
<div id="bb">
<a id="p" href="http://www.baidu.com" target="_blank" >我是超级链接<button id="sub">子按钮</button></a>
</div>
<div id="text">
</div>
</body>
<script>
$(function(){
/父亲节点a绑定到body中
$("#body").on("click","#p",function(event){
$("#text").append("<p>父亲元素被点击</p>");
})
//孩子节点绑定在div中
$("#bb").on("click","#sub",function(event){
$("#text").append("<p>子元素被点击</p>");
event.stopPropagation(); //只阻止了冒泡事件， 默认默认行为没有阻止
})
})
13 </script>
测试结果：有阻止冒泡事件
<script>
$(function(){
/父亲节点a绑定到div中
$("#bb").on("click","#p",function(event){
$("#text").append("<p>父亲元素被点击</p>");
})
//孩子节点绑定在body中
$("#body").on("click","#sub",function(event){
$("#text").append("<p>子元素被点击</p>");
event.stopPropagation(); //只阻止了冒泡事件， 默认默认行为没有阻止
})
})
</script>
测试结果：阻止冒泡失败，并且是父亲元素a的click先触发
<body id="body">
<div id="bb">
<a id="p" href="http://www.baidu.com" target="_blank" onclick="test()">我是超级链接<button id="sub">子按钮</button></a>
</div>
<div id="text">
</div>
</body>
<script>
$(function(){
$("#bb").on("click","#sub",function(event){
$("#text").append("<p>子元素被点击</p>");
event.stopPropagation(); //只阻止了冒泡事件， 默认默认行为没有阻止
})
})
function test(){
$("#text").append("<p>父亲元素被点击</p>");
}
</script>
测试结果：阻止冒泡失败，并且是父亲元素a的click先触发
<body id="body">
<div id="bb">
<a id="p" href="http://www.baidu.com" target="_blank">我是超级链接<button id="sub" onclick="test(event)">子按钮</button></a>
</div>
<div id="text">
</div>
</body>
<script>
$(function(){
//父亲绑定到body
$("#body").on("click","#p",function(event){
$("#text").append("<p>父亲元素被点击</p>");
})
})
function test(event){ //event在onclick那边直接传入，这样才支持所有浏览器
$("#text").append("<p>子元素被点击</p>");
event.stopPropagation();
}
</script>
测试结果：阻止冒泡成功
JQuery阻止冒泡事件on绑定中异常情况分析的更多相关文章
- jquery阻止冒泡事件行为发生
<div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 【笔记】jquery阻止冒泡事件发生的语句
时间触发时会执行两个步骤:1.捕获 2.冒泡,而很多浏览器包括jquery都不支持捕获动作所以只能执行冒泡动作. 所谓冒泡就是当点击就是事件的执行顺序,本人的理解为:但某一元素触发时间时它的祖先元素( ...
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...
- 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态
给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...
- 关于jquery stopPropagation()阻止冒泡事件
我们经常会遇到点击两个或者多个重叠的层事件的时候,往往点击最里的的一层会接连触发外面的点击事件.这时候就需要用到stopPropagation事件即阻止冒泡事件html代码如下<!DOCTYPE ...
- jquery的冒泡事件event.stopPropagation()
js中的冒泡事件与事件监听 冒泡事件 js中“冒泡事件”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的冒泡应该 说是交换更加准确:js ...
- 微信小程序--阻止冒泡事件
微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
随机推荐
- iOS 简单音乐播放器 界面搭建
如图搭建一个音乐播放器界面,具备以下几个简单功能: 1,界面协调,整洁. 2,点击播放,控制进度条. 3.三收藏歌曲,点击收藏,心形收藏标志颜色加深. 4,左右按钮,切换歌曲图片和标题. 5,点击中间 ...
- 在Fedora 20 上安装Mysql并初始化root密码
[root@localhost ~]# yum -y install community-mysql-server #安装数据库 已加载插件:langpacks, refresh-packagekit ...
- Caffe学习系列(13):对训练好的模型进行fine-tune
使用http://www.cnblogs.com/573177885qq/p/5804863.html中的图片进行训练和测试. 整个流程差不多,fine-tune命令: ./build/tools/c ...
- jenkins Auth fail验证失败
重新设置密码
- Maven 实用命令和技巧
1.Jar冲突排查 maven dependency:tree 人工排除
- 【GoLang】golang 中可变参数的 定义、传递 示例
支持可变长参数列表的函数可以支持任意个传入参数,比如fmt.Println函数就是一个支持可变长参数列表的函数. package main import "fmt" // 这个函数 ...
- SQL Server被锁的表以及解锁
select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys ...
- POJ 1065
http://poj.org/problem?id=1065 题目的大体意思就是给一些木头长l,重w,有一个机器,如果切割这些木头的话,在i后面切割的i+1根木头满足长度和重量都要大于等于前一根则不需 ...
- 修改MySQL中字段的类型和长度
MySQL修改字段类型的命令是: mysql> alter table 表名 modify column 字段名 类型; 假设在MySQL中有一个表为:address,有一个字段为city 初始 ...
- SQL Update 巧用
JOIN 样本 ********************************** Update 结存 set 结存.现有库存=c.入仓数-b.出仓数量 from 结存 a )) 入仓数 from ...