jquery之冒泡事件介绍以及阻止冒泡
什么是事件冒泡
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
<p onclick="test()" style="background: blue">
wubin.pro <br>
<span style="background: green" onclick="inner()">子钦博客</span>
</p>
</div>
<script>
function inner() {
alert('inner');
}
function test() {
alert('test')
}
function box() {
alert('box')
}
</script>
布局结构如下图
一共单层元素
从外到里依次：div、p、span
每个元素都有单机事件
当单击div触发弹出box
当单击p标签时依次弹出：test、box
当单击span标签依次弹出：inner、test、box
这个即为事件冒泡
从最里层冒泡到最外层
如何阻止
很多时候我们不希望事件冒泡
也就是我点击p的时候只弹出test
点击span时候只弹出inner
1.event.stopPropagation()
<body>
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
<p onclick="test()" style="background: blue">
wubin.pro <br>
<span style="background: green" onclick="inner(event)">武斌博客</span>
</p>
</div>
<script>
function inner() {
alert('inner');
event.stopPropagation();
}
function test() {
alert('test')
}
function box(event) {
alert('box')
}
</script>
</body>
这个时候再点击子钦博客时
只是弹出inner
2.return false
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<span style="background: green" >武斌博客</span>
</p>
</div>
<script>
$(function () {
$('span').click(function(){
alert('inner');
return false;
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
效果跟第一种相同
都可以阻止事件冒泡
return false与event.stopPropagation()区别
我们将以上代码修改为:
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<a href="https://wubin.pro" style="background: green" >子钦博客</a>
</p>
</div>
<script>
$(function () {
$('a').click(function(event){
alert('inner');
// return false;
event.stopPropagation();
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
可以看出
当使用return false时
a标签的默认行（跳转页面）为也会被阻止
当使用event.stopPropagation()时
先弹出inner
然后页面跳转
总结
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<a href="https://wubin.pro" style="background: green" >子钦博客</a>
</p>
</div>
<script>
$(function () {
$('a').click(function(event){
alert('inner');
// return false;
// event.stopPropagation();
event.preventDefault();
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
return false：阻止事件冒泡和默认行为
event.stopPropagation()：单独阻止事件冒泡
event.preventDefault()：单独阻止默认行为
jquery之冒泡事件介绍以及阻止冒泡的更多相关文章
- vue 事件上加阻止冒泡 阻止默认事件
重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...
- 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent
stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...
- 微信小程序--阻止冒泡事件
微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...
- 前端基本知识（一）：W3C标准&&冒泡事件，捕获事件，W3C DOM对象模型，对比分析
W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- JQuery阻止冒泡事件on绑定中异常情况分析
科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...
- 【笔记】jquery阻止冒泡事件发生的语句
时间触发时会执行两个步骤:1.捕获 2.冒泡,而很多浏览器包括jquery都不支持捕获动作所以只能执行冒泡动作. 所谓冒泡就是当点击就是事件的执行顺序,本人的理解为:但某一元素触发时间时它的祖先元素( ...
- jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【.NET异步编程系列2】掌控SynchronizationContext避免deadlock
引言: 多线程编程/异步编程非常复杂,有很多概念和工具需要去学习,贴心的.NET提供Task线程包装类和await/async异步编程语法糖简化了异步编程方式. 相信很多开发者都看到如下异步编程实践原 ...
- 初探机器学习之使用百度EasyDL定制化模型
一.Why 定制化模型 一般来说,各大云服务厂商只会提供一些最常见通用的AI服务,针对具体场景的AI应用则需要在云服务厂商提供的服务之上进行定制.例如,通常的图像识别只能做到分析照片的主题内容,而我的 ...
- KnockoutJS知识规整目录
对于Web开发来讲,前端接触是避免不了的,特别是对于中小公司,没有严格的职位区分,前后端人员互相身兼是常有的事情,使用一些好的框架,能够帮助我们快速开发并完成需要的功能,对于前端的JS框架来讲MVVM ...
- Java进阶篇设计模式之六 ----- 组合模式和过滤器模式
前言 在上一篇中我们学习了结构型模式的外观模式和装饰器模式.本篇则来学习下组合模式和过滤器模式. 组合模式 简介 组合模式是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来 ...
- 使用docker-compose 一键部署你的分布式调用链跟踪框架skywalking
一旦你的程序docker化之后,你会遇到各种问题,比如原来采用的本地记日志的方式就不再方便了,虽然你可以挂载到宿主机,但你使用 --scale 的话,会导致 记录日志异常,所以最好的方式还是要做日志中 ...
- api接口参数问题
对于取数据,我们使用最多的应该就是get请求了吧.下面通过几个示例看看我们的get请求参数传递. 回到顶部 1.基础类型参数 [HttpGet] public string GetAllChargin ...
- 设计模式 | 工厂方法模式（factory method）
定义: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 结构:(书中图,侵删) 一个工厂的抽象接口 若干个具体的工厂类 一个需要创建对象的抽象接口 若干个 ...
- Odoo：全球第一免费开源ERP 人力资源模块操作指南（完美珍藏版）
概述 人力资源管理概述 一般企业里,和人力资源相关的工作有:1)员工合同管理,即员工基本档案管理:2)招聘管理,即岗位及岗位人员补充管理:3)员工薪资计算: 4)员工考勤:5)员工休假管理:6)员工绩 ...
- Android底部导航栏(可滑动)----TabLayout+viewPager
[TabLayout] ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组.属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ② ...
- PostgreSQL 10.7 linux 主从配置
PostgreSQL 10.7 主从安装 硬件环境 云服务商:华为云 Linux: CentOS7.1 工具:Xshell Xftp IP:114.115.251.168 Port: 5432 543 ...