uni-app cover-view @click 事件不触发

uni-app cover-view @click 事件不触发

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.4

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iphone 8

页面类型：vue

打包方式：云端

示例代码：

<template>  
    <view class="pages">  
        <cover-view class="live-out" [@click](/user/click)="hideVideo">关闭视频</cover-view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
        }  
    },  
    methods: {  
        hideVideo(){  
            console.log(321321)  
        }  
    }  
}  
</script>  

<style lang="scss" scoped>  
.pages{  
    background-color: #000000;  
    align-items: center;  
    position: relative;  
}  
.live-out{  
    margin-top: 200rpx;  
    width: 320rpx;  
    height: 100rpx;  
    line-height: 100rpx;  
    text-align: center;  
    border: 1rpx solid #FFFFFF;  
    border-radius: 4rpx;  
    color: #FFFFFF;  
    font-size: 26rpx;  
}  
</style>

操作步骤：

  • 点击按钮

预期结果：

  • 执行click事件

实际结果：

  • click事件未触发

bug描述：

cover-view @click 事件不触发，不执行


更多关于uni-app cover-view @click 事件不触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

cover-view cover-image 点击事件标签内不要包裹其他元素 例如: <cover-view class=“cover” @click=“close()”></cover-view> 错误示例: <cover-view class=“cover” @click=“close()”>
<cover-image src="~@/static/images/close.png"></cover-image>
</cover-view>

更多关于uni-app cover-view @click 事件不触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用文档中的示例，是否能出现你的问题？https://uniapp.dcloud.io/component/cover-view?id=cover-view

测试用例也不执行，cover-image的执行了

回复 z***@dzpk.com: 其他设备是否有此问题？

回复 DCloud_UNI_Anne: 安卓机cover-view点击都失效

1.z-index层级被其他遮挡，导致点击事件未穿透。

点击事件一定要在最外层元素，而且一定可点击，比如文字或者图片。 我是点击事件加载在父级div上，点击一直无效，最后加载在最外层图片上才行。

在uni-app中，cover-view组件在iOS平台确实存在点击事件不触发的问题，这通常是由于层级和事件传递机制导致的。

解决方案：

  1. 使用[@tap](/user/tap)替代@click：

    <cover-view class="live-out" [@tap](/user/tap)="hideVideo">关闭视频</cover-view>

    在移动端优先使用[@tap](/user/tap)事件，它更符合触摸屏的交互特性。

  2. 确保cover-view可点击区域足够大： 检查样式设置，确保元素有足够的尺寸和正确的层级。避免被其他元素遮挡。

  3. 检查父容器事件干扰： 如果父级容器有事件监听，可能会阻止事件冒泡。可以尝试添加.stop修饰符：

    <cover-view class="live-out" [@tap](/user/tap).stop="hideVideo">关闭视频</cover-view>

  4. 确认cover-view使用场景： cover-view通常用于覆盖在原生组件（如video、map）之上，确保它确实处于正确层级。在普通view结构中，直接使用view组件可能更稳定。

  5. 更新HBuilderX版本： 当前使用的3.1.4版本较旧，建议升级到最新稳定版，修复了多个已知问题。

修改后代码：

<template>
    <view class="pages">
        <cover-view class="live-out" [@tap](/user/tap)="hideVideo">关闭视频</cover-view>
    </view>
</template>
回到顶部