当前位置：首页 > news >正文

记一次奇葩的错误，uniapp @tap点击失效

news 来源：原创 2025/5/23 5:14:30

先说问题原因，css 中使用了卡片翻转效果，backface-visibility: hidden; 这行导致正面元素能看到，但是点击失效了。移除掉这行就好了。

异常说明

下面这段uniapp代码在微信小程序的ios环境能够正常触发tap事件，但是到了安卓没有任何反应，也没报错。

排查过程

(z-index) 首先可能是元素层级导致

很多因为这个的原因但是我遇到的不是。当时代码中元素层级很复杂，排查层级这一步废了很多时间。

事件传递原因

我的组件最外层盒子有注册@touchstart @touchmove @touchend ，有让我在内层tap加 stop 阻止事件传递。试了没效果

解决

结论就是因为使用了3d盒子，然后安卓和ios机制不一样，ios可以触发安卓无法触发。
backface-visibility: hidden;
把这行移动到背面的盒子上，解决!

css真是高深，玩不明白。

伪代码


<view class="card-swiper"><view class="card-swiper-item"><view class="card"><view class="card-box-base-sty">// fun1有效 ， fun2无效 （当时排查头发扣完都没想明白！）<view @tap="fun1(item)" class="image-card-btn share-btn">按钮2</view><view @tap="fun2(item)" class="image-card-btn share-btn">按钮2</view></view><view class=" card-box-base-sty card-box-back">....省略</view></view></view>
</view>// style.card {position: relative;width: 70%;height: auto;transform-style: preserve-3d;/* 给卡片添加默认动画 */animation: 1s cubic-bezier(0.66, -0.47, 0.33, 1.5) forwards;animation-name: rotate-reverse;}.card-swiper {position: relative;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;display: flex;flex-direction: row;transition: transform 0.5s ease;/* 保证删除时的平滑重排 */will-change: transform;backface-visibility: hidden;}.card-swiper-item {flex: none;width: 100%;display: flex;align-items: center;justify-content: center;perspective: 1000px;}// 卡片正面.card-box-base-sty {position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: var(--border-radius);padding: 0;transition: all 0.5s ease;border: 12rpx solid var(--color);box-sizing: border-box;backface-visibility: hidden; // 注意这行 - 罪魁祸首！}// 卡片背面.card-box-back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: rotateY(180deg);display: flex;align-items: center;justify-content: center;z-index: 5;backface-visibility: hidden; }