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 ...
随机推荐
- HttpServletRequest 接口、HttpServletResponse 接口、请求转发与重定向
上篇文章我们讲了servlet的基本原理,这章将讲一下剩余的部分. HttpServletRequest 接口 该接口是 ServletRequest 接口的子接口,封装了 HTTP 请求的相关信息, ...
- 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...
- Windows中使用Mysql-Proxy实现Mysql读写分离
1.简介 读写分离:当业务量上来时,往往一台单机的mysql数据库不能满足性能需求,这时候就需要配置主从库读写分离来解决性能瓶颈.简单的来说,就是原先一台数据库既读又写,现在改成一台写和1台以上读. ...
- .net mvc + layui做图片上传(一)
图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...
- 正确分析结构使用正确的HTML标签。CSS样式写一起。
在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...
- SVN使用规范
1.提交之前先更新.当完成功能之后,首先检查自己修改了什么 ,然后通过编译并且自己测试之后,谨慎地提交,不可强行提交. 2.在更新时注意所更新文件的列表,如果提交过程中产生了更新,也需要重新编译并且完 ...
- Postgres全文搜索功能
当构建一个Web应用时,经常被要求加上搜索功能.其实有时候我们也不知道我要搜索个啥,反正就是要有这个功能.搜索确实很重要的特性,这也是为什么像Elasticsearch和Solr这样基于Lucene的 ...
- 使用 Node.js 搭建 Web 服务器
使用Node.js搭建Web服务器是学习Node.js比较全面的入门教程,因为实现Web服务器需要用到几个比较重要的模块:http模块.文件系统.url解析模块.路径解析模块.以及301重定向技术等, ...
- 基于IPV6数据包的分析(GNS3)
一.实验拓扑 二.路由配置 1.路由R1的详细配置(以R1为例,R2与R3相同) R1(config)#interface fastEthernet 0/1 R1(config-if)#ipv6 ad ...
- pandas操作
python中使用了pandas的一些操作,特此记录下来: 生成DataFrame import pandas as pd data = pd.DataFrame({ 'v_id': ["v ...