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就可以了


相关文章
|
6月前
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
205 0
|
6月前
|
开发框架 移动开发 前端开发
Uni-App常用事件
Uni-App常用事件
206 2
|
移动开发 Android开发 iOS开发
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
713 0
|
6月前
|
XML Java Android开发
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
196 0
|
4月前
|
JavaScript 前端开发
uni-app组件 子组件onLoad、onReady事件无效
突然发现在项目中,组件 子组件的onLoad、onReady事件无效 打印也出不来值 怎么处理呢?
387 1
|
6月前
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
|
6月前
uni-app只执行一次事件
uni-app只执行一次事件
256 3
|
6月前
uniapp App端 解决input@input事件动态修改值不生效的问题
uniapp App端 解决input@input事件动态修改值不生效的问题
394 1
|
6月前
|
存储 Web App开发 iOS开发
Electron 从基础到实战笔记 - Electron App对象及其事件
Electron 从基础到实战笔记 - Electron App对象及其事件
229 0
|
6月前
|
XML Java Android开发
Android App事件交互Event之模仿京东App实现下拉刷新功能(附源码 可直接使用)
Android App事件交互Event之模仿京东App实现下拉刷新功能(附源码 可直接使用)
101 0
Android App事件交互Event之模仿京东App实现下拉刷新功能(附源码 可直接使用)

热门文章

最新文章