jquery通过on绑定事件，停止冒泡不起作用

最新推荐文章于 2022-02-14 16:56:05 发布
最新推荐文章于 2022-02-14 16:56:05 发布
阅读量797 收藏
点赞数
分类专栏： javascript

  • 转载自：http://www.myjscode.com/page/article16.html


    在一个容器内部，某个元素通过on绑定事件，e.stopPropagation()不生效的问题

    首先需要了解的是on绑定事件的原理，on事件可以给未出现的dom添加事件，为什么？因为我们是在元素的父元素添加的事件，通过e.target来定位当前点击的是哪个元素。换句话说，on绑定的事件其实是绑定在父元素上面的。所以在子元素中阻止冒泡是没有作用的，还是会触发父元素上面的事件。

    解决方法：如果父元素绑定了click，子元素也绑定的click，不希望点击子元素出发父元素的click。那么在父元素的click响应函数中，判断$(e.target).closeset('')选中子元素，如果成立，return掉就可以

李发顺
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于jquery中用on绑定事件后的事件冒泡问题
hgffhh的博客
11-18 1072
关于jquery中用on绑定事件后的事件冒泡问题
Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)
01-08
一、v-bind 先来一个常见场景： 在vue里定义了个名为mytitle的属性 var vm=new Vue({ el:#app, data:{ mytitle:This is a title! }, }) 此时 如果 是不行的 此时 只会将mytitle当作普通字符串 并不会去vue实例中寻找对应的属性 此时 可用v-bind加在属性前面 绑定一个属性 标明该属性是一个变量 这样 在解析的时候 会自动去vue实例的data里寻找对应的变量 这样就可以了 使用v-bind的时候 还可在
jQuery中on绑定事件后引发的事件冒泡问题如何解决
10-22
主要介绍了jQuery中on绑定事件后引发的事件冒泡问题及解决办法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
JQuery 阻止事件冒泡---3种实现方式
Nick.Peng's Blogs
09-20 7754
第一种：return false： 缺点：直接返回了函数，函数后面的语句没法执行了； $('.btn').on('click',function(event){ do something ... return false }) 第二种：event.stopPropagation()： 1、阻止事件冒泡这里以click事件为例 <divclass="b...
jq在ios下的on事件失效
飞一样的编程
01-03 2844
在ios的浏览器中出现一下情况： 绑定document，on时间失效 $(document).on('click','#weixin_btn,#close_box',function(){      }) 解决方法，最后家一行代码，如下 $("body").children().click(function(){}) -------------------------------
jQuery事件绑定方法学习总结(推荐)
10-21
总结起来，jQuery的事件绑定方法各有特点，`bind()`适用于静态元素的简单绑定，`delegate()`和`live()`则为动态元素提供解决方案，而`on()`则是目前最全面且推荐的事件绑定方法。在实际开发中，应根据项目需求和性能...
jQuery中阻止冒泡事件的方法介绍
10-26
在JavaScript和jQuery中，事件冒泡是一个常见的概念，它指的是事件从最深的节点开始，沿着DOM树向上级节点传播，直到到达根节点的过程。这种机制使得事件可以在多个层次的元素上触发，允许我们对同一事件进行多次...
jquery使用on绑定a标签无效 只能用live解决
11-24
在jQuery中，`on()`方法是用于事件绑定的关键函数，特别是在处理动态添加到DOM中的元素时。然而，有时候我们可能会遇到使用`on()`方法绑定事件无法正常工作的情况，特别是针对动态生成的元素，如本例中的`<a>`标签。...
JQuery阻止冒泡事件on绑定中异常情况分析
Alfred的博客
09-09 3309
本文转载自https://www.cnblogs.com/tengj/p/4794947.html，纯粹作为日常笔记使用 科普下事件冒泡以及默认行为,以下面例子举列子：     事件冒泡：当点击内部button元素时，会触发自身及外层 a的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。                        事件冒泡可能会引起意料之外的效...
jquery 阻止冒泡事件
Jouen521的博客
02-01 2452
在工作中遇见了因jquery冒泡引起的问题，刚好总结一下 阻止事件冒泡      .first{       width:200px;       height:200px;       background: #333;       color:#fff;      }      .secound{       width:100px;       h
jQuery阻止事件冒泡
weixin_30332705的博客
09-03 132
jQuery 提供了两种方式来阻止事件冒泡。 方式一： event.stopPropagation(); $("#div1").mousedown(function(event) { event.stopPropagation(); }); 方式二：return false; $("#div1").mousedown(function(event) { retur...
jquery阻止事件冒泡及解决办法 live
热门推荐
千里客的博客
09-13 1万+
动态添加标签的live事件注：jquery版本1.8之后不在支持live事件 在实际项目中遇到的问题，动态添加的标签 live阻止冒泡失效，无论是用return false还是用e.stopPropagation()都不能阻止冒泡发生 以下是自己总结的例子 html<div id="box"> <a href="javascript:;" class="delete">init
关于jquery动态加载节点后阻止事件冒泡失效的问题
weixin_30667301的博客
03-05 455
今天在用jquery的ajax方法动态加载节点时，发现之前绑定在节点上的阻止事件冒泡的事件失效了(这句话有点拗口，我也只能这么说了,希望大家能够理解),刚开始我在前台使用一下代码： var e=arguments.callee.caller.arguments[0]||event; if(e && e.stopPropagation) { 　...
jquery 阻止事件冒泡
我恨有钱人的博客
02-14 1065
jquery 阻止事件冒泡
阻止冒泡无效问题
weixin_45162984的博客
12-07 1456
经常遇到用js渲染的div，绑定事件需要用到事件委托，此时阻止冒泡不能使用在时间委托中实现，比如 // 这种方法无效，阻止不了冒泡 $(document).on('click','#id',function(event) { event = event || window.event; event.stopPropagation(); }) 正确的写法是 // 这是正确写法 $(document).on('click',function() { $('#id').on('click',functio
on事件绑定阻止冒泡的问题
weixin_30338497的博客
12-30 413
当使用on进行事件绑定时当要给document绑定click，而子元素要禁止冒泡，那么子元素里面的子元素的click事件就会无效了， 下面无效版： $('#queue').on('click', '.link', function() { var t = $(this) ,box = t.next() if(t.hasClass('ac...
jquery中on动态绑定阻止冒泡事件异常
xuexizhe88的博客
02-17 6911
绪论：如果动态生成的元素用on来绑定事件，会根据selector不同，阻止冒泡的结果也不同。
Jquery使用stopPropagation需要注意的问题
空想家的专栏
08-05 3685
在使用live()绑定事件时，stopPropagation()失效了，查阅后发现官网上作者给出一个解决方案，截图如下：
jquery事件绑定 冒泡
最新发布
09-09
在jQuery中，可以使用事件绑定方法来处理事件冒泡。jQuery提供了多种事件绑定的方法，其中常见的是`on()`方法和`bind()`方法。这些方法可以用于绑定事件处理程序，并且默认情况下会处理事件冒泡。 例如，使用`on()`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值