uni-app事件冒泡 如何解决事件冒泡 推荐tap事件

简介: uni-app事件冒泡 如何解决事件冒泡 推荐tap事件

冒泡事件##


冒泡事件
        <view class="max-box" @tap="waimian">
      外面
      <view class="in-box" @tap="limain">里面</view>
    </view>
    waimian(){
      console.log("外面")
    },
    limain(){
      console.log("里面")
    }


点击外面的时候,不会触发里面元素的事件

 

但是点击里面元素的时候,就会触发外面元素的事件,这就是冒泡哈!!

 

如何解决事件冒泡了

 

添加一个stop

<view class="in-box" @tap.stop="limain">里面</view>

 

就会阻止里面这个元素冒泡

在手机上  推荐使用的事件是tap

<view @tap="Hanldergo">按钮</view>

uni-app统一支持的是数据双向绑定哈

想要拿到data中的数据  可以直接去使用this.XXX就可以了


相关文章
|
1月前
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
89 0
|
1月前
|
开发框架 移动开发 前端开发
Uni-App常用事件
Uni-App常用事件
58 2
|
7月前
|
移动开发 Android开发 iOS开发
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
309 0
|
1月前
|
XML Java Android开发
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
75 0
|
1月前
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
|
1月前
uni-app只执行一次事件
uni-app只执行一次事件
95 3
|
1月前
|
存储 Web App开发 iOS开发
Electron 从基础到实战笔记 - Electron App对象及其事件
Electron 从基础到实战笔记 - Electron App对象及其事件
138 0
|
1月前
uniapp App端 解决input@input事件动态修改值不生效的问题
uniapp App端 解决input@input事件动态修改值不生效的问题
143 1
|
1月前
|
XML Java Android开发
Android App事件交互Event之模仿京东App实现下拉刷新功能(附源码 可直接使用)
Android App事件交互Event之模仿京东App实现下拉刷新功能(附源码 可直接使用)
51 0
Android App事件交互Event之模仿京东App实现下拉刷新功能(附源码 可直接使用)
|
1月前
|
XML Java Android开发
Android App事件交互中辨别缩放与旋转手指的讲解与实战(附源码 可直接使用)
Android App事件交互中辨别缩放与旋转手指的讲解与实战(附源码 可直接使用)
59 0