jquery点击内层的click事件时会触发外层的click事件

最新推荐文章于 2022-06-15 11:01:34 发布
转载 最新推荐文章于 2022-06-15 11:01:34 发布 · 627 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/darktime/archive/2013/06/13/3133625.html
文章标签：

#javascript #前端 #ViewUI

本文介绍了在使用jQuery进行网页开发时，如何处理点击事件的冒泡现象。具体讲解了当内层元素被点击时，如何避免触发外层元素的click事件，并提供了event.stopPropagation()方法作为解决方案。

jquery点击内层的click事件时会触发外层的click事件，俗称冒泡事件！

使用event.stopPropagation(); 可以阻止冒泡事件的发生！

转载于:https://www.cnblogs.com/darktime/archive/2013/06/13/3133625.html

利用JQuery阻止事件冒泡
10-20
如果点击子div，通常情况下，事件会冒泡到外层div，乃至整个页面的body。但在实际应用中，我们只希望处理最内层div的事件，这时就需要阻止事件冒泡。 2. 当我们触发了某个元素的事件后，不希望这个事件继续传播到...
jquery阻止冒泡事件使用模拟事件
10-26
当用户在页面上进行点击、鼠标移动等操作时，这些操作会产生一个事件，这个事件会从最内层的元素开始，逐步向上传播至最外层的document元素。在这个过程中，如果每个元素都有针对该事件的处理函数，那么这些函数将会...
解决内层<li>触发外层<li>设置的事件
doudou_demo的专栏
08-28 5219
这个问题说的专业一点就是jquery、js的冒泡事件，上网搜了老半天才搞好 比如：<ul id="ul1"> <li>列表一 <ul id="ul2"> <li><a href="" target="iframe">功能一</a></li> <li><a href="" target="iframe">功能二</a></li> </ul> </li> <li>
js技巧之——个按钮点击(onclick)后，来触发另一个按钮的onclick事件 .
yuli001123的专栏
05-23 3269
方法之一： &lt;a href="#" name="aa" id="aa" onClick="alert('haha')"&gt;点击&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;a href="#" onClick="document.getE
vue外层div上有点击事件，内层div也有点击事件，想要实现点内层div，不触发外层点击事件
西卡卡的博客
03-15 3404
vue有个属性是@click.stop="test()" 因为我写app，用@tap（mui框架中app的点击事件），本来还以为不能用，后来试了下，好用的 想了想也对，毕竟是mui只是个UI框架，实际还是vue的东西 <view class="tab-bar-line" v-for="(item, index) in list" :key="item.id"> <view class="content" @click="goDetail(item.id)">
@click.stop阻止外层的click冒泡
vicky_yongqi的博客
11-19 338
点击播放却没有播放，但总点进播放器： 代码这里：
vue外层div上有点击事件，内层div也有点击事件，想要实现点 内层div，不触发外层点击事件（综合一下记录）
Winsom1的博客
06-15 5466
综合笔记，感谢原作者
jQuery学习笔记之jQuery的事件
10-28
事件冒泡是指事件从内层元素向上冒泡到外层元素，直到文档根节点。如果希望阻止这种行为，可以使用`.stopPropagation()`。例如，在事件处理函数中添加`event.stopPropagation()`可以防止事件继续向上冒泡。同时，...
jQuery的事件委托实例分析
10-23
在事件冒泡过程中，一个事件会从最内层的DOM元素开始触发，然后逐级向上传播到更外层的DOM元素，直到文档的根节点。事件委托正是利用了这一点，将事件监听器绑定到父元素上，然后通过检查事件目标元素来决定是否执行...
深入理解jQuery之防止冒泡事件
12-28
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 下面是html代码部分： <body> 外层div元素 内层span元素 外层div元素 <div id=msg></div> </body> 对应的jQuery代码如下： ...
click事件嵌套click事件多次触发的解决方法
大桶爆米花eee
06-15 6449
这个问题是在做一个聊天界面时出现的 想要的效果是点击左侧的头像时，获取其对应的id，之后在对话框中点击发送按钮时发送消息，并获取头像的id，这个时候发现，当点击发送绑定的click时，变量就会显示出所有点过的所有id。 最开始我想要解除事件冒泡，后来发现不是这个问题 分析后发现每次点击外部的click事件后，内部的click事件都会绑定一次，因此会遍历很多次 解决方案是每次点击后使...
JS 点击某元素以外的地方触发事件 - Kaiqisan
Kaiqisan的博客
08-27 1万+
JS 点击某元素以外的地方触发事件 ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,在半年前让我十分头疼的问题，自从我开始正式学习event事件和DOM之后，我：就这？就这？ 解决这个问题的核心关键还是利用event对象 现在有HTML代码如下 <div style="width: 400px;height: 300px;border: 1px solid #000000; margin: 10% auto 0 auto; text-align: ce
纯js实现点击一个事件后，触发另外一个事件的方法
热门推荐
xmt1139057136的专栏
07-31 1万+
我们在日常的开发中，经常会用到，当我点击一个按钮的click事件后，我想触发另一个按钮的click事件。 这时我们该怎么做呢。用过ext的人都知道，frieEvent方法。但是在使用手机开发的时候，ext对我们的作用就不是很大了。 虽然ext5.0出来了，对手机又支持的功能需求。但是你会为了一个很小的功能，去加载整个庞大的ext.js吗。就算你会使用，你的客户会买账吗。 并不一定会吧，因为你
JQuery实现点击里层div事件，不触发外面的div的点击事件
u013954206的博客
03-03 4081
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery实现点击里层div事件，不触发外面的div的点击事件</title> </head> <body> <div id="outter" styl...
css3实现点击扩散效果
lwaner的博客
07-06 2008
效果图 效果介绍: 点击省份所在的六边形时，以当前点击的六边形为中心，边框高亮显示并且实现向外扩散的效果 思路解析： 点击之后它六个边儿，然后每一个边儿的话，它往上走，一点点的这个描边儿，然后是周围的图片是没有高亮的，这样的话，直接用这个图片儿去实现就可以了，比如说把整张这个高亮的这个图就是以这个为中心，然后往右边儿扩散的，这个图儿整个扣下来，当你点击某一个的时候。你把他这个背景图直接替换成你这个高亮显示的这个描边儿图，然后他最好加一个过渡效果，那你这个时候可以用CSS给他加一个从中间往外扩散的一个，比如
jquery阻止子元素触发父元素的事件的方法
choumoyin5005的博客
10-28 1253
<div style=" width:300px; height:200px;"> <a href="http://bbs.blueidea.com">点我不要触发</a> </div> 正常情况下，点击a链接会触发div的click事件...
uniapp阻止冒泡的方法，点击事件嵌套点击事件，怎么阻止同时触发
weixin_45272820的博客
02-20 8074
uniapp阻止冒泡的方法 当我们遇到点击事件嵌套点击事件的时候，点击里边的事件，外边的也会跟着触发该怎么办？ 起初我尝试用了css里的修改z-index属性的方法，把里边的<view>标签放在上边，结果两个事件还是同时触发。(无效) 这种情况应该就意识到这是冒泡事件啊，那是不是该联想到阻止冒泡了呢。 实例: <view class="fparent" @click="s...
进入jsp页面自动触发onclick()事件
追风筝的人
07-22 1万+
进入jsp页面有一个button按钮，点击之后触发onclick()事件，如何不需要手动点击就自动触发onclick()事件，方式有很多，这里提供一种方式以供参考！ 下面是手工点击触发onclick()事件代码： 下面是js代码： function load(){ document.getElementById("bottons").onclick(); } window.onlo
jQuery事件处理技术详解
当不再需要某个事件处理器时，可以使用jQuery的.off()方法来移除事件处理器，避免内存泄漏或不期望的事件触发。 由于文件名为“赚钱项目”，这可能表明文档的实际内容并不与标题和描述中所描述的jQuery事件函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值