jquery使用on（）方法绑定元素阻止事件冒泡问题

最新推荐文章于 2021-04-06 15:54:23 发布
最新推荐文章于 2021-04-06 15:54:23 发布
阅读量911 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanxue_tyc/article/details/55212111
版权

由于on（）方法的绑定机制与其他不同，当使用on()方法动态绑定的元素需要阻止冒泡行为时，使用e.stopPropagation() 与return false 无效

解决方法：使用e.target检测，（if条件判断）如果与传入的选择符（‘button’）、（‘a’）匹配，则添加事件。否则不添加

hanxue_tyc
关注
关于jquery中用on绑定事件后的事件冒泡问题
hgffhh的博客
11-18 1089
关于jquery中用on绑定事件后的事件冒泡问题
jQuery中事件的绑定和解绑以及事件冒泡和事件冒泡的阻止
dwjdj的博客
05-08 347
一、元素事件的绑定 为按钮绑定鼠标进入,鼠标离开,点击事件 第一种方法 $("#btn").mouseenter(function () { $(this).css("backgroundColor","red"); }); $("#btn").mouseleave(function () { $(this).css("backgroundColor","blue");
jQuery中on绑定事件后引发的事件冒泡问题如何解决
10-22
主要介绍了jQuery中on绑定事件后引发的事件冒泡问题及解决办法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
jquery中on动态绑定阻止冒泡事件异常
xuexizhe88的博客
02-17 6939
绪论：如果动态生成的元素用on来绑定事件，会根据selector不同，阻止冒泡的结果也不同。
JQuery阻止冒泡事件on绑定中异常情况分析
Alfred的博客
09-09 3327
本文转载自https://www.cnblogs.com/tengj/p/4794947.html，纯粹作为日常笔记使用 科普下事件冒泡以及默认行为,以下面例子举列子：     事件冒泡：当点击内部button元素时，会触发自身及外层 a的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。                        事件冒泡可能会引起意料之外的效...
JQuery阻止（默认）事件冒泡
IT界泥石流
06-15 9698
1.事件冒泡     事件冒泡就是，你在执行元素点击事件的时候同时也会触发到此元素的其前辈元素的点击事件，从而可能造成一定程度上的程序混乱现象，为了避免这种情况的出现，现在我们可以使用阻止事件冒泡。   阻止事件冒泡：even.stopPropagation();//不触发除本身之外的其他任何控件的事件          【案例】   定义两个div，第一个div里嵌套一个span标签，没以个di...
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
在jQuery中，可以使用多种方法来绑定事件，最常用的方法是`bind()`和`on()`。解绑事件指的是在不需要某个事件响应时，取消之前绑定的事件处理器，这可以通过`unbind()`方法或`off()`方法完成。 事件冒泡是事件在DOM...
JQuery中使用on方法绑定hover事件实例
10-25
4. 在使用`on`方法时，需要注意事件冒泡（event bubbling）的问题。如果需要在特定的子元素上触发事件而不影响父元素，可以在子元素的事件处理函数中使用`event.stopPropagation()`方法。 总结来说，当需要在一些...
jQuery中对未来的元素绑定事件用bind、live or on
10-26
为了解决这个问题，jQuery提供了一些机制来为未来元素绑定事件，比如`bind`、`live`、`on`和`.one()`方法。 首先，我们要认识到，`bind`方法是不可以用来绑定未来元素的事件的。这是因为在`bind`方法被调用的时候，...
JQuery 阻止事件冒泡---3种实现方式
Nick.Peng's Blogs
09-20 7889
第一种：return false： 缺点：直接返回了函数，函数后面的语句没法执行了； $('.btn').on('click',function(event){ do something ... return false }) 第二种：event.stopPropagation()： 1、阻止事件冒泡这里以click事件为例 <divclass="b...
jquery中阻止默认事件和事件冒泡的方法
丽丽大神ing的博客
10-22 3073
　1.在事件的处理中，可以阻止默认事件和冒泡事件。return false $("li").on('click',function(){ return false; }) 2.在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。e.preventDefault() $("li").on('click',function(e){ e.preventDefault() }) ...
jQuery 事件冒泡
shuai的博客
04-13 322
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <link rel="stylesheet" href...
jQuery事件绑定与冒泡处理、绑定多种事件@2018-06-16
qq_34983808的博客
06-16 285
1、jQuery事件绑定 $('body').one('click',function(){ }) // 只会执行一次，然后销毁事件 2、冒泡处理 方式一： $('div').on('click',function(event){ event.stopPropagation();//阻止事件冒泡 alert(2) }) 方式二： $('...
jQuery使用on进行事件委托，父、子元素绑定相同事件，阻止冒泡
Serena_tz的博客
04-06 1301
最近公司在做的一个移动门户需要使用jQuery，但是好久没有用jQuery进行开发，着实有点忘记jQuery的语法。jQuery中最推荐的事件绑定方式是用on事件，同时利用on事件也能完成事件委托。 因为该移动门户中展示的卡片列表是通过ajax获取数据后新生成的元素，所以，要么重新绑定一次事件，要么，进行事件委托，将事件监听绑定在新生成的元素的父元素上面。我采用了第二种方法，也就是利用on方法进行事件委托，利用ul列表做了简单的测试。 因为父、子元素均绑定了相同的事件，而新生成的子元素要将事件委托给父元素，
JQuery中阻止事件冒泡方式及其区别
热门推荐
JeamKing的专栏
02-27 29万+
JQuery 提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation();        $("#div1").mousedown(function(event){            event.stopPropagation();        });方式二：return false;        $("#div1").mousedown(
jQuery事件---阻止冒泡和默认行为
Twilight's Blog
06-16 1万+
冒泡如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。例如：<body> <div style="width:300px;height:300px;background-color:skyblue;"> <input type="button" value="button"/> </div> </body>如果document、d
jquery onclick绑定的方法阻止事件冒泡
weixin_44540711的博客
08-18 2969
记录一下，自己经常忘记老去百度 使用jquery onclick绑定的方法中要阻止事件冒泡其实非常简单，只需要传递一个参数即可，代码如下 <a target="_blank" href="http://www.baidu.com" class="annex-p" data-annex="baidu">点我去百度<i onclick="delAnnex(event)">关闭</i></a> <script> function delAnn.
动态添加元素时的jQuery事件绑定修复方法
在jQuery中，当动态添加HTML元素后，如果这些元素需要绑定事件，可能会遇到问题，因为新添加的元素无法响应预先设置的事件处理程序。这是因为JavaScript事件监听器需要对每个元素单独绑定，不同于CSS样式，后者可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值