【报Bug】uniapp部分点击事件失效

t***@qq.com

z-index的问题，因为用平板，有的元素把你要点击的位置遮挡了

8***@qq.com

牛逼，我的问题确实是这个。

2023-08-11 08:41

g***@outlook.com - conwy

我也是遇到这样的事情，@chilk @tap 事件无效。刚启动APP 按钮还能点击。多点几次就无效，没反应了。

3***@qq.com

好像是有延迟的原因,并不是无效，有时点击会等个200ms 才会执行

2022-09-26 13:47

6***@qq.com

什么情况了？？

1***@qq.com

我的是view标签添加的点击事件，flex布局，下面有个view放的字体另一个view放的图片，只有点击图片才能触发

2023-11-01 15:15
qjp

回复 1***@qq.com: 俺也一样,有解决方案了吗

2024-01-18 15:25

ZGH0709

未复现 bug, 发个 demo?

m***@foxmail.com - jiang

我也是，点击事件无效 @click @tap都不行

梦里追逐

遇到类似的问题
v-else上面添加@click事件不生效

TBaymax

我也遇到了，只有部分不行，换@tap就可以了

DCloud_UNI_Anne

请提供能复现您问题的demo

m***@foxmail.com

我的问题跟这个一样，例子已经给你了，结果被你删了帖，你是刚毕业吧？！

2020-11-25 11:00
DCloud_UNI_Anne

回复 m***@foxmail.com: 没有删您的贴哦，如果文章中有禁止发表的内容会被系统屏蔽的。您如果要报bug,请去提交一下报BUG模板，提供复现示例，我们会尽快为您处理的，感谢您的反馈！

2020-11-26 10:41
m***@foxmail.com

回复 DCloud_UNI_Anne: 问题被屏蔽？为什么我自己都无法看到了？这不是删除是什么？有问题我自己可以改啊！完全没给机会就删除了！

2020-11-26 10:56
EJRUN以界

uniapp 编译到 app 后，click 事件仍会失效。估计这是一个隐藏了多年的底层逻辑bug。

原因分析：不是click 失效，而是组件的 emit 事件，页面无法捕捉。

复现方法：

1、做一个组件 A ，A emit("click")

2、做一个页面，在其中用 v-if 使用组件A ，比如 <A v-if="condition" @click="myclick" />

3、首次进入页面时，点击A ，myclick 事件会被触发，当v-if == false ，组件被隐藏，然后 v-if == true 组件再显现时，myclick 事件就无法触发了。

2022-10-11 08:43
EJRUN以界

一定要用自定义组件 A ，反复切换 vif 状态几次，问题必定会重现。

如果时 uniapp 内置组件，就没有这个问题

v-if == false 时，组件被销毁

当 v-if == true 组件再次被创建时，@ 要绑定的事件，没有被正确绑上，所以就出现点击无效。

2022-10-11 08:57

2***@qq.com

tap click失效  <template> <view> <view class="content"> <TAbbar :user-type="userType" @change="swtichSwiper" /> <swiper current="current" duration="300" class="scroll-view-height"
@change="swipeIndex"
>
<swiper-item>
<scroll-view scroll-y="true" class="list-content">
<view
v-for="(item, index) in list" key="'进行中' + item.id" class="list-item"
hover-class="list-itemHover"
@tap="navTo(item)"
>
<view class="list-item-huiyi">
<view class="list-item-huiyi-name">
会议名称：<text style="color: red">
{{ ${item.title} (${index + 1}) }}
</text>
</view>
</view>
<view class="list-item-meeting">
<view class="list-item-meeting-type">
会议类型： {{ item.type }}
</view>
<view class="list-item-meeting-type">
主持人： {{ item.name }}
</view>
<view class="list-item-meeting-type">
召开时间： {{ item.dataTime }}
</view>
<view class="list-item-meeting-type">
召开地点： {{ item.site }}
</view>
</view>
</view>
<view
v-if="list.length"
class="scroll-view-height-noCard"
hover-class="list-itemHover"
@tap="load(item)"
>
<text>加载更多</text>
</view>
<view v-if="!list.length" class="scroll-view-height-noCard">
<text>当前没有进行的会议</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="list-content">
<view
v-for="(item, index) in list" key="'进行中' + index" class="list-item"
hover-class="list-itemHover"
@tap="navTo(item)"
>
<view class="list-item-huiyi">
<view class="list-item-huiyi-name">
会议名称：<text style="color: red">
{{ ${item.title} (${index + 1}) }}
</text>
</view>
</view>
<view class="list-item-meeting">
<view class="list-item-meeting-type">
会议类型： {{ item.type }}
</view>
<view class="list-item-meeting-type">
主持人： {{ item.name }}
</view>
<view class="list-item-meeting-type">
召开时间： {{ item.dataTime }}
</view>
<view class="list-item-meeting-type">
召开地点： {{ item.site }}
</view>
</view>
</view>
<view
v-if="list.length"
class="scroll-view-height-noCard"
hover-class="list-itemHover"
@tap="load(item)"
>
<text>加载更多</text>
</view>
<view v-if="!list.length" class="scroll-view-height-noCard">
<text>当前没有进行的会议</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="list-content">
<view
v-for="(item, index) in list" key="'进行中' + index" class="list-item"
hover-class="list-itemHover"
@tap="navTo(item)"
>
<view class="list-item-huiyi">
<view class="list-item-huiyi-name">
会议名称：<text style="color: red">
{{ ${item.title} (${index + 1}) }}
</text>
</view>
</view>
<view class="list-item-meeting">
<view class="list-item-meeting-type">
会议类型： {{ item.type }}
</view>
<view class="list-item-meeting-type">
主持人： {{ item.name }}
</view>
<view class="list-item-meeting-type">
召开时间： {{ item.dataTime }}
</view>
<view class="list-item-meeting-type">
召开地点： {{ item.site }}
</view>
</view>
</view>
<view
v-if="list.length"
class="scroll-view-height-noCard"
hover-class="list-itemHover"
@tap="load(item)"
>
<text>加载更多</text>
</view>
<view v-if="!list.length" class="scroll-view-height-noCard">
<text>当前没有进行的会议</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>

const { proxy } = getCurrentInstance() as any
const current = ref(0)
const userType = ref(0)
// eslint-disable-next-line no-unused-vars
const scrollerHeight = ref('')
// eslint-disable-next-line no-unused-vars
const scrollerWidth = ref('')
const list = ref([
{
title: '关于高新区清扫黄赌毒等一系列有关问题',
type: '常委会',
name: '刘德华',
dataTime: '2022-10-01 12:00',
site: '成都是高新区环球中心'
}
])
const swipeIndex = (index: Number) => {
proxy.userType = index.detail.current
}
const swtichSwiper = (index: any) => {
proxy.current = index
}
const navTo = (item: any) => {
uni.navigateTo({
url: /pages/details/details?item=${encodeURIComponent(JSON.stringify(item))}
})
}
const load = () => {
const listItem = {
title: '测试',
name: '测试',
type: '人大',
dataTime: '2022-12-12 12:00',
site: 'redaction'
}
uni.showLoading({
title: '加载中'
})
setTimeout(() => {
uni.hideLoading()
proxy.list.push(listItem)
}, 500)
}
onResize(() => {
uni.getSystemInfo({
// eslint-disable-next-line object-shorthand, func-names
success: function (res) {
// 获取屏幕的高度
proxy.scrollerHeight = ${res.windowHeight}px
// 获取屏幕的宽度
proxy.scrollerWidth = ${res.windowWidth}px
}
})
})
onBeforeMount(() => {
uni.getSystemInfo({
// eslint-disable-next-line object-shorthand, func-names
success: function (res) {
// 获取屏幕的高度
proxy.scrollerHeight = ${res.windowHeight}px
// 获取屏幕的宽度
proxy.scrollerWidth = ${res.windowWidth}px
}
})
})
</script>

.list-content {
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
width: 100%;
background-color: $user-bg-color;
}
.list-itemHover {
background-color: #eee;
}
.list-item {
height: 20%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin: 0.5% 0;
border-bottom: solid 5rpx $brimColor;
border-top: solid 5rpx $brimColor;
overflow: auto;
&-huiyi {
padding-top: 10rpx;
height: 40%;
width: 100%;
font-size: 1.2em;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
&-name {
height: 100%;
width: 80%;
}
}
&-meeting {
height: 100%;
width: 80%;
font-size: 1.2em;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: space-between;
flex-wrap: wrap;
&-type {
border-radius: 5px;
box-sizing: border-box;
width: calc(50% - 1rpx);
height: calc(50% - 1rpx);
float: left;
}
}
}
</style>

2***@qq.com

h5能正常点击，app直接失效

2022-09-21 15:17

EJRUN以界

uniapp 编译到 app 后，click 事件仍会失效。估计这是一个隐藏了多年的底层逻辑bug。

原因分析：不是click 失效，而是组件的 emit 事件，页面无法捕捉。

复现方法：
1、做一个组件 A ，A emit("click")
2、做一个页面，在其中用 v-if 使用组件A ，比如 <A v-if="condition" @click="myclick" />
3、首次进入页面时，点击A ，myclick 事件会被触发，当v-if == false ，组件被隐藏，然后 v-if == true 组件再显现时，myclick 事件就无法触发了。

2***@qq.com

我也遇到了这个问题，我在拆分组件的时候，将一个列表的 item 拆分成独立的小组件，方便其它页面使用，但是拆分完成后，我列表循环这个组件，同时绑定了 click 事件，结果在小程序中调试的时候 click 事件无效，我把组件的层级调成99999、将容纳组件的的列表组件从 scroll-view 换成 view 还是不行。。。

但是在小组件内部 click 事件是有效的，所以我想了个法子，定义一个事件props ，通过父组件传递事件prop 的方式，在点击的时候调用这个事件 prop ，终于行了。。

【报Bug】uniapp部分点击事件失效

详细问题描述

重现步骤

IDE运行环境说明

uni-app运行环境说明

App运行环境说明

附件

联系方式

11 个回复

公告

相关问题

【报Bug】uniapp部分点击事件失效

详细问题描述

重现步骤

IDE运行环境说明

uni-app运行环境说明

App运行环境说明

附件

联系方式

与内容相关的链接

11 个回复

公告

相关问题