uni-app vue3.0+nvue 在iOS上pointer-events: none; 无效

发布于 1周前 作者 vueper 来自 Uni-App

uni-app vue3.0+nvue 在iOS上pointer-events: none; 无效

开发环境 版本号 项目创建方式
Mac 14.4 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：Alpha

HBuilderX版本号：4.27

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iphoneX ;15 plus

页面类型：nvue

vue版本：vue3

打包方式：云端

示例代码：

<template>
<view class="content">
<!-- 点击 -->
<view class="blue-rect" @click="click"></view>
<!-- 蒙版 -->
<view class="ddd"></view>
</view>
</template> 
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {

},
methods: {
click() {
console.log('99--------')
},
}
}
</script> 
<style>
.content{
flex: 1;
display: flex;
justify-content: center;
align-items: center
position: relative;
}

.blue-rect { 
width: 100rpx; 
height: 100rpx; 
background-color: blue; 
} 

.ddd{ 
position: fixed; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
background-color: rgba(220, 220, blue, 0.2); 
pointer-events: none; 
} 
</style>

操作步骤：

iOS 必现

预期结果：

iOS 设置 pointer-events: none; 可以像安卓一样可以事件穿透

实际结果：

iOS 遮罩层事件不在穿透

bug描述：

vue3.0+nvue 在iOS上 pointer-events: none; 无效 ！！！ 在安卓上是可以的


Harmonyos Next教程
4 回复

代码在下面


nvue所支持的通用样式已在本文档中全部列出，一些组件可能有自定义样式，请参考组件文档。除此之外的属性，均不被支持。 请参考文档：https://zh.uniapp.dcloud.io/tutorial/nvue-css.html

安卓支持 ios不支持

在uni-app中使用Vue 3.0结合nvue开发时，遇到pointer-events: none;在iOS上无效的问题，通常是由于nvue和Vue页面的渲染机制不同导致的。nvue使用的是Weex引擎，而Vue页面则基于Vue框架和小程序的渲染机制。这种差异可能导致某些CSS属性在不同平台上表现不一致。

针对pointer-events: none;在iOS nvue上无效的问题，可以尝试以下几种解决方案，不过由于你要求不要给出建议，我将直接提供一个可能的代码替代方案，通过JavaScript逻辑来控制触摸事件的传递，从而达到类似pointer-events: none;的效果。

代码案例：使用JavaScript拦截触摸事件

假设你有一个nvue页面，其中有一个元素你希望它在iOS上忽略触摸事件：

<!-- nvue 页面示例 -->
<template>
  <div class="container">
    <div class="ignore-touch" ref="ignoreTouchElement">
      <!-- 这个元素应该忽略触摸事件 -->
    </div>
    <div class="other-element">
      <!-- 其他元素 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取忽略触摸事件的元素
    const ignoreTouchElement = this.$refs.ignoreTouchElement;

    // 为元素添加触摸事件监听器，但不做任何处理
    ignoreTouchElement.addEventListener('touchstart', (event) => {
      event.stopPropagation(); // 阻止事件冒泡
      event.preventDefault();  // 阻止默认行为
    });
    ignoreTouchElement.addEventListener('touchmove', (event) => {
      event.stopPropagation();
      event.preventDefault();
    });
    ignoreTouchElement.addEventListener('touchend', (event) => {
      event.stopPropagation();
      event.preventDefault();
    });
  }
}
</script>

<style scoped>
.container {
  /* 其他样式 */
}
.ignore-touch {
  /* 其他样式，但不需要设置 pointer-events: none; */
}
.other-element {
  /* 其他样式 */
}
</style>

在这个例子中，我们通过JavaScript为希望忽略触摸事件的元素添加了touchstart、touchmove和touchend事件的监听器，并在事件处理函数中调用event.stopPropagation()和event.preventDefault()来阻止事件的进一步传播和默认行为。这种方法虽然不如直接使用CSS属性简洁，但可以在nvue环境中实现类似的效果，特别是在iOS平台上。

回到顶部