e.stopPropagation() 失效原因

最新推荐文章于 2024-04-13 20:57:56 发布
最新推荐文章于 2024-04-13 20:57:56 发布
阅读量6.1k 收藏
点赞数 3
分类专栏： JavaScript 文章标签： javascript js jquery
原文链接：https://www.jianshu.com/p/ecb4795cc422
版权 
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>

假如此父子元素为 动态添加的元素 所以在添加事件的时候需要绑定到父级元素
例如：父元素事件

$("body").on("click",".father",function(e){
       alert(1)
});

例如：子元素事件

$(document).on("click",".son",function(e){
       e.stopPropagation();
       alert(2)
});

按道理来讲 子元素事件中添加了 e.stopPropagation(); 会默认不执行父元素的事件，但此处依然执行。
原因是父子元素绑定了不同的父元素，导致e.stopPropagation() 没有起作用;此处的解决办法只要将body改成document或者document改成body就可以了。

我借声色予朝阳
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE框架 导致绑定事件的阻止冒泡失效
heartOfblack 离开了电脑，我不希望我还有病
08-17 5483
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@c
React stopPropagation失灵
大灰狼的小绵羊哥哥的博客
03-01 3255
前言 故事的开头是这样的：写业务的过程中，发现在React的onClick的回调函数里，用stopPropagation阻止绑定在document上的事件的时候，是没办法做到的，只可以阻止outClick事件的触发。详情如下： class ExampleApplication extends React.Component { componentDidMount() { ...
uniapp中使用.stop报错 无法使用stopPropagation？
最新发布
g1437353759的博客
04-13 386
在开发中我们常常会遇到要的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function这是因为当事件添加到上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。
e.stopPropagation()在uni-app中无效，只能使用stop，所产生的问题
晓枫
02-25 2322
​ 之前做的仪表盘滑动效果 uni-app 微信小程序，因为在苹果手机上滑动时页面会抖动，所以这部分里是阻止了滑动事件的冒泡的，本来页面不足一屏是没有问题可是出了新需求后页面需要上下滚动，就导致了在仪表盘部分上下滑动无法滚动页面，操作很不方便。
uniapp stopPropagation 无效
MAIMIHO的博客
07-13 3741
官方说明 DCloud_UNI_GSQ 只支持使用修饰符，不支持使用stopPropagation，因为这里的event对象并非浏览器的evnet对象，其本来没有stopPropagation方法，文档中也从未提及支持stopPropagation方法，实现中有stopPropagation方法是为了避免开发者使用引用的第三方代码使用了stopPropagation后报错。 只能在标签上使用 .stop 如果想根据 item 内容不同来判断是否需要 stop, 只能使用 v-if 写两个标签 ..
css 外弧_css 弧度
weixin_30658827的博客
02-01 232
style.head-bg {position: absolute;height: 1.9rem;width: 100%;overflow: hidden;z-index: -1;}.head-bg .bgImg{position: absolute;content: ‘‘;z-index: 1;height: 2.5rem;top: -.6rem;left: -75%;width: 250%;b...
关于bootstrap-select赋值时候报错： e.stopPropagation is not a function
热门推荐
键圣的博客
11-22 1万+
场景是：使用$('#vendorId').selectpicker('val',data.vendorId);给单选框赋值的时候js报错 然后不能代码更改单选框的值。 究其原因是因为selectpicker 没能完整的初始化， 现在添加代码： console.log("默认选中"+$('#vendorId').val()); $('#vendorId').selectpicke
Jquery阻止事件冒泡 event.stopPropagation
10-28
标题中的"Jquery阻止事件冒泡 event.stopPropagation"就涉及到如何在jQuery中避免事件冒泡到DOM树的上级元素。`event.stopPropagation()`是jQuery提供的一个方法，用于阻止事件继续在DOM树中向上冒泡。当你调用这个...
关于event.cancelBubble和event.stopPropagation()的区别介绍
09-05
在JavaScript的事件处理中，`event.cancelBubble` 和 `event.stopPropagation()` 都是用来控制事件冒泡的行为，但它们之间存在一些关键的区别。事件冒泡是指事件从最深的节点开始，逐级向上层节点传播事件的过程。...
return false;和e.preventDefault();的区别
09-05
如果你想同时阻止事件冒泡，你需要使用 `e.stopPropagation();` 与 `e.preventDefault();` 结合。所以，`return false;` 实际上相当于： ```javascript function(e) { e.preventDefault(); e.stopPropagation(); ...
【报错】v-on handler: &quot；TypeError: $event.stopPropagation is not a function
Effotzjw_小白慢慢踏全栈
02-21 2346
在vue中，对input框直接使用@click去触发事件，是无法达到想要的效果，也无法触发事件，需要加上native才能实现input框的点击事件触发，即@click.native=“XXX”在input上写了@click，想阻止冒泡，但是一直报不存在的问题。
bootstrap多选下拉框编辑回显报错e.stopPropagation is not a function
果酱 の 博客
09-28 4480
原因是selectpicker 没能完整的初始化，先初始化： $('#edit_schoolId').selectpicker(); jq 代码:             var schoolId = $("#schoolId_each").val();             if (schoolId) {                 var str = schoolId.split("...
svg stopPropagation失效的解决办法(pointerevent)
斯幽柏雷科技
02-16 638
PS:所以这大概是一个几乎没有人翻到的帖子。如果帮到你了别忘留个赞。 前言 来了兄弟们,刚才发现e.stopPropagation();失效了?? 我正在对svg的子svg元素进行绑定事件,svg内有多级复杂的svg嵌套. 子svg的点击事件依旧会触发父级svg的点击事件. 原因 查了圈帖子,大概似乎好像确定问题是不同根的原因. 注意:这跟React不触发的原因不一样! 我也是直到翻到了这哥们的帖子才找到灵感: 《e.stopPropagation() 失效原因》 比方说: 在iframe上和iframe里
CSS制作一个商品分类列表，边框是圆角弧度
xuehyunyu的博客
05-26 1996
ul{ list-style: none; width: 200px; height: 300px; border: 1px solid orange;/*边框颜色*/ padding: 0; margin: 0; text-ali
前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件
chenchuang0128的博客
06-22 2547
### 使用方法```使用方法-- data:商品列表数组[{navtitle:标题 shop:[] 展示列表}] @click:商品条目点击事件-->```#### HTML代码实现部分```html-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->-- data:商品列表数组[{navtitle:标题 shop:展示列表}] @click:商品条目点击事件-->data() {
事件穿透与禁止穿透(e.stopPropagation()、e.preventDefault()、return false)
dmr123456的博客
06-03 2815
问题：点击立即预约按钮会同时触发查看详情事件 解决方案：在顶层事件中添加禁止穿透事件可防止触发底层事件。 const goAppointment = e => { e.stopPropagation(); // 禁止事件冒泡 }; const AuthenticateItem = ({ appraisalType, data, onClick = () => {} }) => ( <div className={styles.lawyerItem} ..
重新认识vue之事件阻止冒泡
az44yao的专栏
06-20 2188
冒泡的表现 近期用vue做了一个需求，大概是同一个区域，点击不同位置有不同的响应函数，还有个总的响应函数，好吧，如下图所示: 他们的DOM结构如下: <div v-for="(item, index) in listData" @click="handleClick3"> <el-col :span="grid"> <div @click="handleClick1"></div> </el-col>.
vue或uni中.stop阻止事件冒泡报错的问题（修饰符.native）
zhangjiayu88的博客
04-02 4693
在开发中我们常常会遇到要阻止事件冒泡的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function。这是因为当事件添加到Vue组件上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。1.native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)；2. native修饰符只能用在组件上, 不能用在原生标签上。，就可以解决这个报错问题。
e.stopPropagation()移动端
06-06
e.stopPropagation() 是 JavaScript 中的一个方法，用于阻止事件冒泡。在移动端，当用户点击某个元素时，会触发该元素上的 click 事件，并且该事件会一直向上冒泡，直到到达文档根元素。如果在某个父元素上绑定了 click 事件，那么点击子元素时，该事件也会被触发。如果不想让该事件向上冒泡，可以在子元素的 click 事件处理函数中调用 e.stopPropagation() 方法，这样该事件就不会被触发父元素上的事件处理函数了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值