jquery冒泡事件

最新推荐文章于 2024-04-22 15:31:17 发布
最新推荐文章于 2024-04-22 15:31:17 发布
阅读量839 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40075229/article/details/78737548
版权
原文：http://www.jb51.net/article/84908.htm


<body>
<div id="content">
外层div元素 <span>内层span元素</span>
</div>
<div id="info"></div>
</body>


$(function() {
//为span元素绑定click事件
$('span').bind('click', function() {
var txt = $('#info').html() + '<p>内层span元素被点击</p>';
$('#info').html(txt);
event.stopPropagation(); //停止事件冒泡
});
//为div元素绑定click事件
$('#content').bind('click', function() {
var txt = $('#info').html() + '<p>外层div元素被点击</p>';
$('#info').html(txt);
return false;//停止事件冒泡
});
//为body元素绑定click事件
$('body').bind('click', function() {
var txt = $('#info').html() + '<p>body元素被点击</p>';
$('#info').html(txt);
});
});


/*当你单击‘内层span元素'时，即触发<span>元素的click事件时，会输出3条记录
即：
内层span元素被点击
外层div元素被点击
body元素被点击
这就是事件冒泡引起的 */
 
/* 阻止冒泡事件：click事件中添加    return false  或   event.stopPropagation(); */
HN-ssg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery冒泡事件详解
南北北南的博客
01-05 354
上面四部分无论在代码还是在结果上都存在一定的差异，下面分别对各个部分进行分析： 图一代码分析：body,div,#d1,#d2，都存在点击事件，所以当点击input #d2时，先是#d2执行click事件，由于冒泡事件的触发，#d2的上一级div也被触发了点击事件，于是继续执行div的点击事件，从而执行$("#d2").html(“欢迎来到jquery世界”)方法，由于html("")方法会将原
jQuery之事件
缚己
11-05 206
页面加载 DOM 提供了window.onload 属性用来设置页面加载完毕之后执行的代码。当 html 中的 <script> 标签，写在 head 中时 js 代码会优先于 body 标签内的页面内容，所以需要这样一个属性等待页面加载的完成再执行。 jQuery 提供了 ready() 方法用来做页面加载的属性，与 DOM 中的 window.onload 起到了同样的作用。 jQuery 的入口函数执行要高于原生 DOM 的入口函数。 两种入口函数的区别： window.onload：
jQuery 事件冒泡
柯晓楠
11-28 2997
jQuery 事件冒泡解释 官方解释： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 草根解释： 当我们在某一个元素上去触发一个事件时，比如鼠标移动事件，该元素所绑定的事件也会影响到其子元素，或者是在
点击事件和事件冒泡
爸ba的博客
03-23 1050
单机事件 onclick双击事件 ondblclick移入事件 onmouseover移出事件 onmouseou进入事件 onmouseenter离开事件 onmouseleave按下事件 onmousedown抬起事件 onmouseup。
jQuery基础学习（属性操作、循环、事件冒泡委托、元素节点操作、滚轮事件、函数节流、json、ajax、jsonp与本地存储）
我的个人博客
04-22 1025
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。其次可以让新加入的子元素也可以拥有相同的操作。
jQuery事件冒泡，事件委托，多库共存，入口函数
摸鱼小队
12-22 406
一，事件冒泡 问题描述： 冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。 通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。 阻
click点击一次触发多次，冒泡与阻止冒泡，event.stopPropagation()和event.preventDefault()，return false三种的区别
唐策的博客
01-26 8938
eg：click点击一次触发多次， 解决办法：在对on绑定事件前，先解除绑定 $(document).off("click","#div").on("click","#div", function(){ alert("Hello World"); }) 今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方
jQuery事件冒泡
qibulemingzi的博客
07-24 647
jQuery事件冒泡 一、什么是事件冒泡 冒泡事件就是点击子节点，会向上触发父节点、祖先节点的点击事件。 eg： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/jav
利用JQuery阻止事件冒泡
10-20
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。本文主要介绍JQuery阻止事件冒泡的实例解析。需要的朋友来看下吧
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
jQuery阻止事件冒泡具体实现
10-26
在JavaScript和jQuery中，事件冒泡是一个常见的概念，它描述了事件从最具体的元素（子节点）向上逐级传播到不那么具体的元素（父节点和祖先节点）的过程。当你在子节点上触发一个事件，例如点击，这个事件不仅会在该...
jQuery阻止事件冒泡实例分析
10-18
主要介绍了jQuery阻止事件冒泡的方法,结合实例形式分析了jQuery阻止事件冒泡的原理、常用实现方法,并结合完整实例形式分析了jQuery阻止事件冒泡的相关操作技巧,需要的朋友可以参考下
JQuer事件冒泡详解
xyq286654901的博客
03-20 534
前言：记录自己在工作中遇到的小问题，积少成多！因为是新手，有什么写的不好的地方还希望大家指出来。有什么更好的方法还希望大家提出来，一起交流学习！（小弟先在这里谢谢大家）正文：一、时间冒泡默认情况下，事件使用事件冒泡流。当事件（例如单击事件）在某一DOM事件上被触发时，事件将沿着该节点的各个父节点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直...
Jquery 事件冒泡
weixin_30258901的博客
03-22 118
原文链接http://blog.163.com/chtx87_98/blog/static/654011192011830928585/ 原文链接二：http://hi.baidu.com/armyknife/blog/item/60ddc6c378b00847b219a81b.html （1）什么是事件起泡首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，...
事件冒泡学个透
杜永康的博客
12-09 1169
事件冒泡，这一逻辑学名词对于很多初次学习js的程序员还是比较抽象，我想尝试用一种直观的方式，在这里将这个东西讲透。首先我们去查看了事件冒泡的百度解释：这一解释相对比较友好，但是难免还有些官方话。到底该怎么理解呢？我们往下看： 接下来再为此框架设置简单的样式，样式呈现： 然后我们点击每个颜色不一样的元素，得到以下结果： 程序员，这有什么规律，又说明什么？你发现了，事件是由内向外触发的。正如事件冒泡名字本身一样形象，泡泡都是从水里开始出现，向水面移动，直到溢出水面爆炸，冒泡结束。在编程语言里，
element中el-form-item的slot为label设置el-button的click事件会冒泡到整个label
小马甲
10-09 2415
element中el-form-item的slot为label设置el-button的click事件会冒泡到整个label
jQuery中常见的事件处理方法、事件的冒泡、事件对象
weixin_46065214的博客
08-23 478
jQuery中常见的事件处理方法、事件的冒泡、事件对象
jQuery的事件绑定与事件委托
热门推荐
aiolos1111的专栏
07-28 1万+
在用jQuery的事件绑定时，会用到on()、bind()、live()、 delegate()这几个方法，但对他们的区别缺从未注意过，现稍总结一下，如有错误，欢迎指正。       参考文档： http://blog.csdn.net/xxd851116/article/details/8646899 http://www.jb51.net/article/57827.htm http://
jquery实现事件冒泡
最新发布
06-27
在 jQuery 中，可以通过 `.on()` 方法来绑定事件并利用事件冒泡。例如，如果你想在点击一个按钮时也触发其父级元素的事件，可以这样做： ```javascript // 绑定点击事件到按钮 $("#myButton").on("click", function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值