uni-app nvue ios 外层给绝对定位，里面的元素点击事件失效？

uni-app nvue ios 外层给绝对定位，里面的元素点击事件失效？

项目属性 值
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 Mac
HBuilderX类型 正式
HBuilderX版本号 3.8.3
手机系统 iOS
手机系统版本号 iOS 16
手机厂商 苹果
手机机型 苹果13
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<view class="gas-station">
<view class="gas-station-arrow" :style="[{  width: screenWidth + 'px' }]" @touchmove="handletouchmove"
@touchstart="handletouchstart" @touchend="handletouchend">
<image src="@/pagesA/static/image/map/arrowDown.png" mode="" v-if="showList" class="logos"
@click.stop="upView">
</image>
<image @click.stop="upView" class="logos" src="@/pagesA/static/image/map/arrowUp.png" mode="" v-else>
</image>
</view>
</view> 

    flex: 1;  
    background: rgba(255, 255, 255, 1);  
    box-shadow: 8rpx 0 24rpx rgba(57, 111, 250, 0.23);  
    opacity: 1;  
    border-radius: 60rpx 60rpx 0 0;  
    position: absolute;  
    bottom: 0;  
    z-index: 99999;  
    padding-top: 22rpx;  
}

操作步骤：

nvue里面，外层有个view给上绝对定位，里面的点击事件全部失效

预期结果：

nvue里面，外层有个view给上绝对定位，里面的点击事件正常

实际结果：

nvue里面，外层有个view给上绝对定位，里面的点击事件全部失效

bug描述：

nvue里面，外层有个view给上绝对定位，里面的点击事件全部失效 只有ios有这个bug 安卓正常


更多关于uni-app nvue ios 外层给绝对定位，里面的元素点击事件失效？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

修复了吗

更多关于uni-app nvue ios 外层给绝对定位，里面的元素点击事件失效？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


@DCloud_App_Array 修复了吗

在 uni-app 中使用 nvue 开发时，如果你在外层元素设置了 position: absolute;，可能会导致内部元素的点击事件失效。这种情况通常是因为 nvue 的渲染机制与传统的 Web 开发有所不同，特别是在 iOS 平台上。

可能的原因

  1. 层级问题：position: absolute; 可能会导致元素的层级发生变化，使得内部的元素无法正确响应点击事件。
  2. 事件冒泡：在某些情况下，事件冒泡可能被阻止或未正确传递。
  3. 渲染方式：nvue 使用的是原生渲染方式，与 Web 渲染不同，可能会导致某些 CSS 属性的行为与预期不符。

解决方法

  1. 检查层级：确保内部元素的 z-index 设置正确，避免被其他元素遮挡。
  2. 使用 position: relative;：如果可能，尝试将外层元素的 position 改为 relative，看看是否能解决问题。
  3. 事件绑定：确保点击事件正确绑定在内部元素上，并且没有被其他事件处理程序阻止。
  4. 使用 touch 事件：在 nvue 中，某些情况下 click 事件可能不如 touch 事件可靠，可以尝试使用 @touchstart 或 @touchend 来代替 @click。
  5. 调试：使用 console.log 或 debugger 来调试事件是否被触发，检查事件冒泡是否正常。

示例代码

<template>
  <view class="outer" style="position: absolute;">
    <view class="inner" @click="handleClick">
      点击我
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件触发');
    }
  }
}
</script>

<style>
.outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
回到顶部