HarmonyOS web页面点击穿透问题

在开发webview时，我们设置了沉浸式效果，也就是隐藏导航栏上的信息，只保留一个返回按钮。但在webview里面的游戏页面，有一个设置按钮，正好导航栏挡住了这个设置按钮。现在希望可以在点击设置按钮这个区域时，可以点击到游戏设置上。

HarmonyOS

Excelsior_abit

2024-12-25 14:39:23

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

请尝试使用以下demo：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Web({ src: $rawfile('index.html'), controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
        .javaScriptAccess(true)
        .layoutMode(WebLayoutMode.FIT_CONTENT)
        .id("bg")

      Button("导航")
        .onClick(() => {
          console.log("tag1", "导航 onClick");
        })
        .margin({ top: 10, right: 40 })


    }
    .onChildTouchTest((touchinfo) => {
      return { id:"bg", strategy: TouchTestStrategy.FORWARD }
    })
  }
}


<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>右上角按钮点击事件输出日志到屏幕示例</title>
  <style>
    /* 设置按钮的样式，使其固定在页面的右上角 */
    .float-button {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
/* 设置日志输出区域的样式 */
#log-container {
  margin-top: 60px; /* 留出按钮的空间 */
  padding: 10px;
  border: 1px solid #ccc;
  max-height: 300px;
  overflow-y: auto;
}
</style>
  </head>
  <body>
  <!-- 按钮元素，点击时会触发addLog函数 -->
  <button class="float-button" onclick="addLog()">点击我</button>

  <!-- 日志输出区域 -->
  <div id="log-container"></div>

  <script>
  // JavaScript函数，用于处理点击事件并添加日志
  function addLog() {
    // 获取当前时间
    const now = new Date();
    // 创建日志消息
    const logMessage = `日志记录：按钮在 ${now.toLocaleString()} 被点击。\n`;
    // 获取日志容器
    const logContainer = document.getElementById('log-container');
    // 将日志消息添加到日志容器中
    logContainer.innerHTML += logMessage;
    // 滚动到日志容器的底部
    logContainer.scrollTop = logContainer.scrollHeight;
  }
  </script>
  </body>
  </html>

使用这个接口：onchildtouchtest

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-on-child-touch-test-V5#onchildtouchtest

2024-12-25 17:21:07

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS web页面点击穿透问题

订阅鸿蒙技术特刊，精选内容抢先看