flutter 的webview中touchstart和touchend 执行异常问题解决

效果

背景

使用flutter 调用webview内网页，网页内容是监听touchstart和 touchend，触发不同是事件，但是发现每次长按都 手指抬起后 才会执行 touchstart和touchend，满足不了我的需求，我的需求是当手指按下 立即执行touchstart，手指拿来再执行 touchend。

解决方案

抛弃浏览器事件，利用自定义事件，进行flutter 调用，控制事件的执行

网页端 绑定 document 的 onLongPressDown 和 onLongPressUp 事件。

  // 监听按下事件
    document.addEventListener("onLongPressDown", () => {
        window.callAppMethod("onLongPressDown", {
          status: this.state === LittleMan.STATE.init,
        });
        // 开始蓄力
        if (this.state === LittleMan.STATE.init) {
          this.state = LittleMan.STATE.storage;
          // 粒子聚集
          this.particle.gather(this.body);
          // 形变
          this.storage();
        }
    });
    // 监听松开事件
    document.addEventListener("onLongPressUp", () => {
        window.callAppMethod("onLongPressUp", {
          status: this.state === LittleMan.STATE.storage,
        });
        if (this.state === LittleMan.STATE.storage) {
          this.state = LittleMan.STATE.jumping;
          // 停止粒子聚集
          this.particle.stopGather();

          // 跳跃
          this.jump();
        }
    });

flutter 端 通过GestureDetector 监听事件的执行，然后通过  webview的 controller 进行触发网页内的事件执行。

GestureDetector(
          onLongPress: () async {
            controller.runJavaScript(
                "document.dispatchEvent(new Event('onLongPressDown'))");
          },
          onLongPressDown: (d) {
            print("onLongPressDown");
            // controller.runJavaScript(
            //     "document.dispatchEvent(new Event('onLongPressDown'))");
          },
          onLongPressUp: () {
            print("onLongPressUp");
            controller.runJavaScript(
                "document.dispatchEvent(new Event('onLongPressUp'))");
          },
          child: WebViewWidget(
            controller: controller,
          ),
        ),