Web页面点击无响应
==========

#### 问题现象

*   问题一：Web页面里的按钮，点击后无响应。
*   问题二：触屏点击有响应，用鼠标点击无响应。

#### 背景知识

*   建立应用侧与Web侧的交互通道有两种方式，一种在Web组件初始化调用，使用[javaScriptProxy](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-attributes#javascriptproxy)接口。另外一种在Web组件初始化完成后调用，使用[registerJavaScriptProxy](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#registerjavascriptproxy)接口。两种方式都需要和[deleteJavaScriptRegister](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#deletejavascriptregister)接口配合使用，防止内存泄漏。
*   [Devtools](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-debugging-with-devtools)：可以用来在电脑上调试手机、平板等移动设备前端页面，查看页面加载的信息、页面样式等。
*   不同类型的智能设备，用户可能有不同的交互方式，如通过触摸屏、鼠标、触控板等。如果针对不同的交互方式单独做适配，会增加开发工作量同时产生大量重复代码。为解决这一问题，系统统一了各种交互方式的API，即实现了交互归一。常见的基础输入方式及其在各输入设备上的表现如[下图](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-interaction#section182814229423)所示：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/87/v3/sJRhDfCXTK2TLG-O9V4Exw/zh-cn_image_0000002628899124.png?HW-CC-KV=V1&HW-CC-Date=20260709T134142Z&HW-CC-Expire=86400&HW-CC-Sign=2C00E9AB4489A8E6A1FD71B37AE50B9E72D58CA4778E2D352B3B7D8225EF895B "点击放大")
    

#### 问题定位

*   问题一：
    1.  日志过滤ARKWEB-CONSOLE，查看H5页面有没有报错日志输出，获得如下日志，可知UNIApp未被定义。
        
        A01194/com.example/ARKWEB-CONSOLE   com.example     I     \[CONSOLE:16\] "Uncaught ReferenceError: UNIApp is not defined", source: https://www.example.com/index.html 
        
    2.  检查是否将ArkTS对象注册到Web组件中，成功注册会有如下日志输出。
        
        A04510/com.example/chromium         com.example     I     \[nweb\_delegate.cc:2712\] RegisterArkJSfunction name : UNIApp
        
*   问题二：
    
    使用Devtools调试Web页面，选择要点击的组件，查看事件侦听器，检查该组件绑定的事件是click还是touch。
    

#### 分析结论

*   问题一：应用侧未正确将ArkTS对象注册到Web侧。
*   问题二：组件绑定的是touch事件，用鼠标点击不会触发。

#### 修改建议

*   问题一：以下是将ArkTS对象注册到Web侧的案例。
    
    import { webview } from '@kit.ArkWeb';
    import { BusinessError } from '@kit.BasicServicesKit';
    import { PromptAction } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct WebPage {
      controller: webview.WebviewController = new webview.WebviewController();
      private prompt: PromptAction = this.getUIContext().getPromptAction();
      @State testObj: TestObj = new TestObj(this.prompt);
    
      build() {
        Column() {
          Button('refresh')
            .onClick(() => {
              try {
                this.controller.refresh();
                this.prompt.showToast({message: '成功刷新'});
              } catch (error) {
                console.error(\`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}\`);
              }
            })
            .margin({top: 20, bottom: 20})
          Button('Register JavaScript To Window')
            .onClick(() => {
              try {
              _  // 同时注册同步和异步函数_
                this.controller.registerJavaScriptProxy(this.testObj, 'objName', \['test'\]);
                this.prompt.showToast({message: '成功注册'});
              } catch (error) {
                console.error(\`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}\`);
              }
            })
            .margin({bottom: 20})
          Button('deleteJavaScriptRegister')
            .onClick(() => {
              try {
                this.controller.deleteJavaScriptRegister('objName');
              } catch (error) {
                console.error(\`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}\`);
              }
            })
            .margin({bottom: 20})
          Web({ src: $rawfile('testWebPage.html'), controller: this.controller })
            .javaScriptAccess(true)
            .fileAccess(true)
            .geolocationAccess(false)
        }
      }
    }
    
    class TestObj {
      prompt: PromptAction | undefined = undefined;
      constructor(prompt: PromptAction) {
        this.prompt = prompt;
      }
    
      test(): void {
        if (this.prompt) {
          this.prompt.showToast({message: '成功调用ArkUI侧方法'});
        }
      }
    }
    
    <!-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <div style="text-align:center;">
        <button type="button" onclick="htmlTest()" style="width:200px;height:80px;font-size:30px;">Click Me!</button>
    </div>
    
    <script type="text/javascript">
        function htmlTest() {
          objName.test();
        }
    </script>
    </body>
    </html>
    
*   问题二：将touch事件改成click事件。