taro H5 下浏览器废弃事件处理,诸如 DOMNodeInserted、DOMNodeRemoved 事件等,需进行修复

ssgvzors  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(57)

相关平台

H5

浏览器版本: chrome 128.0.6613.85
使用框架: React

复现步骤

编译为H5平台后,浏览器控制台会提示当前使用的诸如 DOMNodeInserted、DOMNodeRemoved 事件即将废弃

后定位错误信息位置,为 taro 中的 swiper 组件中使用了上述事件

期望结果

移除相关废弃事件,改用浏览器现阶段支持的事件

实际结果

以下是浏览器控制台错误信息

[Deprecation]Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired. See https://chromestatus.com/feature/5083947249172480 for more information.

[Deprecation]Listener added for a 'DOMNodeRemoved' mutation event. Support for this event type has been removed, and this event will no longer be fired. See https://chromestatus.com/feature/5083947249172480 for more information.

环境信息

Taro v3.6.2

  Taro CLI 3.6.2 environment info:
    System:
      OS: macOS 14.6.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 16.20.2 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 8.19.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.2 => 3.6.2 
      @tarojs/components: 3.6.2 => 3.6.2 
      @tarojs/helper: 3.6.2 => 3.6.2 
      @tarojs/plugin-framework-react: 3.6.2 => 3.6.2 
      @tarojs/plugin-html: ^3.6.2 => 3.6.35 
      @tarojs/plugin-platform-alipay: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-h5: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-jd: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-qq: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-swan: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-tt: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-weapp: 3.6.2 => 3.6.2 
      @tarojs/react: 3.6.2 => 3.6.2 
      @tarojs/runtime: 3.6.2 => 3.6.2 
      @tarojs/shared: 3.6.2 => 3.6.2 
      @tarojs/taro: 3.6.2 => 3.6.2 
      @tarojs/taro-h5: ^3.6.2 => 3.6.2 
      @tarojs/webpack5-runner: 3.6.2 => 3.6.2 
      babel-preset-taro: 3.6.2 => 3.6.2 
      eslint-config-taro: 3.6.2 => 3.6.2 
      react: ^18.0.0 => 18.3.1

补充信息

目前定位到的使用相关废弃事件的代码路径

packages/taro-components/src/components/swiper/swiper.tsx

第 195 行

this.el.addEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce)
    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce)
    this.el.addEventListener('MutationObserver', this.handleSwiperSizeDebounce)

相关问题