uni-app事件处理（冒泡效果问题）

最新推荐文章于 2024-05-07 15:56:05 发布
最新推荐文章于 2024-05-07 15:56:05 发布
阅读量2.7k 收藏
点赞数
分类专栏： uni-app 文章标签： uni-app事件处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44433499/article/details/106277051
版权

uni-app事件处理
在input和textarea中的change事件会被转为blur事件.

踩坑注意:

上述列表中没有的原生事件也可以使用,详情参考hcoder给出的文档

事件修饰符
注意:　　Vue中的事件修饰符在uni-app中有以下问题

stop-----------------使用stop可以阻止冒泡,但是会把一个事件绑定成非冒泡状态,会导致该元素上的catchEventName失效.
按键修饰符-------uni-app运行在智能手机端,没有键盘事件,所以不支持按键修饰符

事件绑定:与vue中的事件绑定一致,使用简写的 @

事件传参:与vue中事件传参基本一致,使用v-for

前端学习007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app实现冒泡点赞功能
04-05
简单易懂，利用vue写了一个点赞的组件，添加到页面上。
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uniapp入坑（一）----事件冒泡
weixin_44691220的博客
12-11 5209
项目中用到了uni-segmented-control分段器来实现不同ucharts图表的切换，需求中有一个是点击除分段器按钮的其他地方时，界面要回到最初的那个。最先是尝试给最外面的盒子加上绑定点击事件，用到的是原生JS实现绑定，然后在分段器的onClickItem中用原生的阻止冒泡事件event.stopPropagation();在PC端运行的时候是完全没问题的，但用真机调试的时候发现报错了T...
uniapp——阻止冒泡
最新发布
努力、拼搏、奋进
05-07 528
uniapp——阻止冒泡
uniapp 之 解决事件冒泡（如：阻止switch 的事件冒泡、nvue 页面阻止事件冒泡）
ZhuangWei的博客
04-26 6874
场景描述：   首先需求是点击该项进入该详情页面；点击switch 切换该项的状态；   图片：       错误解决方案：     错误效果：     代码如下： <view class="contacts-item" @tap="toEditContacts"> <view class="item-title"> <view class="item-title-left"> <text class="contacts-name"
uni-app阻止事件冒泡
i_am_a_div的博客
06-21 660
<!-- #ifdef MP-WEIXIN --> <uni-icons v-if="key_word" @tap.stop="closeInput(e)" class="input-uni-icon" type="closeempty" size="22" color="#ccc" /> <!-- #endif --> 注意：事件必须要传参，不然无效 closeInput(e) { // console.l...
uniapp 冒泡
weixin_68266812的博客
09-02 780
uniapp 冒泡
uni-app登录实例的实现
10-29
【uni-app登录实例的实现】 在移动应用开发领域，uni-app是一个备受青睐的跨平台框架，它允许开发者用一套代码实现多端部署，包括iOS、Android、Web等。本实例将详细讲解如何使用HBuilderX工具来开发一个uni-app...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
基于uni-app框架的登录模板
02-21
5. 响应式布局：模板采用uni-app的响应式布局，适应不同屏幕尺寸的设备，确保在各种终端上都有良好的显示效果。 四、实战应用 1. 集成第三方登录：模板可扩展集成微信、QQ、微博等第三方登录方式，增加用户便利性。...
uniapp阻止冒泡的方法，点击事件嵌套点击事件，怎么阻止同时触发
weixin_45272820的博客
02-20 7822
uniapp阻止冒泡的方法 当我们遇到点击事件嵌套点击事件的时候，点击里边的事件，外边的也会跟着触发该怎么办？ 起初我尝试用了css里的修改z-index属性的方法，把里边的<view>标签放在上边，结果两个事件还是同时触发。(无效) 这种情况应该就意识到这是冒泡事件啊，那是不是该联想到阻止冒泡了呢。 实例: <view class="fparent" @click="s...
uniapp阻止事件冒泡的用法
m0_47843571的博客
10-18 800
给子元素加上事件修饰符.stop <view @click.stop="fg">阻止点击事件的冒泡</view>
uniapp 阻止事件冒泡
m0_58849641的博客
11-08 1317
这样就阻止事件冒泡了 各管各的。
uni-app——如何阻止事件冒泡
TianXuab的博客
10-27 7164
在开始讨论如何阻止事件冒泡之前，让我们先了解一下什么是事件冒泡。事件冒泡是指当一个元素上的事件被触发时，它会向上级元素传播，直到到达文档根节点。这意味着如果我们不采取任何措施，事件将会被多个元素捕获和处理。
uniapp 事件和阻止冒泡
u013140948的博客
05-11 1654
<template> <view> <view class="box1" @tap.stop="box1event()"> 外面 <view class="box2" @tap.stop="box2event()">里面</view> </view> </view> </template> <script> export
uniapp父子容器中阻止事件冒泡
weixin_46636430的博客
01-11 458
uniapp父子容器中阻止事件冒泡
41.开发弹出提示框 uni-popup组件 uni-app
李永毅的博客
10-03 2484
https://ext.dcloud.net.cn/plugin?id=329
uni-app canvas点击事件阻止冒泡
10-18
在uni-app中，可以通过在canvas上绑定touchstart事件，并在事件处理函数中调用event.stopPropagation()方法来阻止事件冒泡。具体代码如下： ``` <canvas @touchstart="handleTouchStart"></canvas> methods: { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值