uniapp阻止冒泡的方法，点击事件嵌套点击事件，怎么阻止同时触发

最新推荐文章于 2024-05-07 15:56:05 发布
最新推荐文章于 2024-05-07 15:56:05 发布
阅读量7.8k 收藏 5
点赞数 6
分类专栏： 前端uniapp 文章标签： 前端 html5 css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45272820/article/details/104405273
版权

uniapp阻止冒泡的方法

当我们遇到点击事件嵌套点击事件的时候，点击里边的事件，外边的也会跟着触发该怎么办？

	起初我尝试用了css里的修改z-index属性的方法，把里边的<view>标签放在上边，结果两个事件还是同时触发。(无效)
	这种情况应该就意识到这是冒泡事件啊，那是不是该联想到阻止冒泡了呢。
实例:
	<view class="fparent"  @click="showdeatil" >
			<view class="children" @click.stop="addCart(food)">	
			</view>
	</view>

O(∩_∩)O哈哈~
关键就在于@click.stop，解决了！

划水的鲸鱼
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript的for循环中嵌套一个点击事件的问题解决
01-19
先看下面一段代码： for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码，当点击Id为“ul”的元素时，会出现弹出10个10。为什么会弹出10个10呢？ 首先，这段代码中的点击事件不是绑定事件，是jQuery的绑定事件，那么绑定事件和普通事件是有区别的。普通事件中，如果对某一个元素添加多个点击事件，那么，最后一个将会把前面的所有点击事件全部覆盖，只能执行最后一个点击事件；而在绑定事件中，则不一样，在同一个元素上，即使绑定再多的点击事件，都会全部执行。也就是说，普通事件中的o
UNIAPP----阻止事件冒泡
weixin_44126737的博客
09-26 1480
在uniapp里面，给父元素一个点击跳转，里面的子元素也会跳转。 倘若子元素要跳另外的页面，那就要解决事件冒泡 父元素 @tap="toindex" 子元素 @tap.stop="towode" 这样就解除了事件冒泡
【Uniapp，Vue】阻止父元素事件覆盖子元素事件
SingDanceRapBall的博客
07-22 2281
有个需求，点击一个元素，让弹出框显示，点击弹出框以外的区域，就关闭弹出框，如下代码所示。但是这样有个问题，就是当弹出框显示以后，点击弹出框的区域也会触发父元素的点击事件。解决方法： 在子组件事件加个stop修饰。，就会相互隔绝父子事件。
uniapp——阻止冒泡
最新发布
努力、拼搏、奋进
05-07 523
uniapp——阻止冒泡
uniapp外层的view跳转页面的方法不影响内层的一个view的点击事件
weixin_40444253的博客
08-15 214
uniapp外层的view跳转页面的方法不影响内层的一个view的点击事件
UNI-APP中点击事件多重响应问题的解决，list列表项item和列表项item中按钮的点击事件冲突，重叠
沧海龙腾LV的博客
04-12 2960
问题描述： list列表项item和列表项item中按钮的点击事件冲突 点击list列表项item执行列表项item点击事件 点击列表项item中按钮，先执行按钮的点击事件，然后继续执行列表项item点击事件（重复） 解决办法： 修改列表项item的click事件为 <view class="list_item" @click="gotoDeviceDetailPage(index)"> 修改列表项item中按钮的点击事件为 <view class="iconfo.
Uniapp点透事件与阻止
weixin_42216094的博客
09-13 7858
uniapp中解决点透事件的正确姿势。
uniapp movable-view组件层级太高，导致里面事件无响应解决办法
LFQP_的博客
05-25 665
uniapp movable-view组件层级太高，导致里面事件无响应解决办法
js事件冒泡及其阻止方法
01-08
概念：事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深 的那个节点）接收，然后逐级向上传播。也就是说我点击子元素，如果父级元素也有监听点击事件，也会被触发到。 事件冒泡 .par...
jQuery中阻止冒泡事件的方法介绍
10-26
在jQuery中，有几种方法可以阻止事件冒泡： 1. **`event.stopPropagation()`**：这是W3C标准的方法，用于阻止事件继续向上级元素传播。但是，当使用`.live()`或`.on()`（`.live()`在jQuery 1.7后已被弃用）这样的...
微信小程序冒泡事件及其阻止方法实例分析
10-17
本文将深入探讨微信小程序中的冒泡事件及其阻止方法，通过实例解析事件的分类、冒泡机制以及如何阻止事件冒泡。 首先，我们要了解事件的种类。在微信小程序中，常见的事件包括点击事件（tap）、长按事件（longtap）...
微信小程序bindtap事件与冒泡阻止详解
10-16
事件冒泡是事件传播的一种机制，当在嵌套的组件中触发事件时，事件会从最内层的组件向外逐层传播，直到最外层。这意味着如果一个父组件绑定了事件处理函数，那么当其子组件触发事件时，也会执行父组件的事件处理函数...
重新认识vue之事件阻止冒泡的实现
10-18
在Vue中，事件冒泡通常会在组件嵌套的情况下造成问题，比如在一个组件内部的子组件上触发的事件会同时被父组件捕获。本文将深入探讨如何在Vue中阻止事件冒泡。 首先，让我们看看事件冒泡的表现。假设你有一个列表，...
【uni-app】movable-area标签，实现区域内滑动及双指缩放
我是咸鱼闲又闲
05-05 1619
uni-app组件movable-area标签优点及应用
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
热门推荐
觉醒法师的专栏
03-08 2万+
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
uni-app之使用movable-view组件的详细教程
码奴一只猿
05-31 2604
UniApp是一个基于Vue.js的跨平台开发框架，它可以让开发者使用Vue的语法编写一次代码，然后同时生成多个平台的应用程序，如小程序、H5、App等。在UniApp中，我们可以使用movable-view组件实现视图元素的拖动和移动功能。本文将详细介绍如何在UniApp中使用movable-view组件，并提供示例代码。
uniapp 页面点击事件
qq_36016297的博客
03-29 1万+
以上是在页面中绑定点击事件的几种方法，可以根据实际情况选择使用。指令来绑定一个事件。在指令的参数中，指定要绑定的事件类型，例如。中，可以为任何一个标签添加点击事件。方法会被调用，并输出一条日志信息。方法会被调用，并输出一条日志信息。事件，当用户点击这个标签时，事件，当用户点击这个标签时，在这个例子中，我们为一个。在这个例子中，我们为一个。语法糖来绑定事件，其中。可以在任何标签上使用。
uniapp中长按事件会触发单击事件
第⑦个前端
01-13 1715
uniapp中长按事件和点击事件冲突问题 解决办法 （自己动手丰衣足食，目前uniapp还没有解决办法） 步骤1 监控触屏事件的开始和结束 @touchstart="touchstartE()" @touchend="touchendE()" touchstartE() { this.touchT = new Date().getTime(); }, touchendE() { this.touchE = new Date().getTime(); }, 步骤2 定义触屏开始时间变量touchT ，
怎么让两个嵌套的点击事件同时触发
06-08
要让两个嵌套的点击事件同时触发，可以使用事件冒泡的机制。当子元素的点击事件被触发时，该事件会向上冒泡到父元素，并依次触发父元素的点击事件，直到冒泡到文档根节点。因此，可以在父元素的点击事件中触发子元素的点击事件。例如，可以在父元素的点击事件中使用 jQuery 的 `trigger()` 方法触发子元素的点击事件，代码如下： ```javascript // HTML 代码 <div id="parent"> <div id="child">子元素</div> </div> // JavaScript 代码 $(function() { $("#parent").click(function() { $("#child").trigger("click"); }); $("#child").click(function() { console.log("子元素被点击"); }); }); ``` 在上面的代码中，当父元素 `parent` 被点击时，会触发子元素 `child` 的点击事件，并输出 "子元素被点击"。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值