fix: 🐛 (xgplayer) enhance touch event handling, fixed #1836

Author: gemxx

packages/xgplayer/src/plugins/mobile/index.js

@@ -103,6 +103,11 @@ class MobilePlugin extends Plugin {
      * @private
      */
     this.timer = null
+    /**
+     * 标记touch事件状态，供PC插件使用
+     * @private
+     */
+    this._isTouchActive = false
   }
 
   get duration () {
@@ -377,6 +382,14 @@ class MobilePlugin extends Plugin {
   onTouchStart = (e) => {
     const { player, config, pos, playerConfig } = this
     const touche = this.getTouche(e)
+
+    // 标记touch事件状态
+    this._isTouchActive = true
+    if (this.touchActiveTimer) {
+      clearTimeout(this.touchActiveTimer)
+      this.touchActiveTimer = null
+    }
+
     if (touche && !config.disableGesture && this.duration > 0 && !player.ended) {
       pos.isStart = true
       this.timer && clearTimeout(this.timer)
@@ -449,6 +462,15 @@ class MobilePlugin extends Plugin {
 
   onTouchEnd = (e) => {
     const { player, pos, playerConfig } = this
+
+    // 延迟重置touch事件状态，确保后续的mouse事件被忽略
+    if (this.touchActiveTimer) {
+      clearTimeout(this.touchActiveTimer)
+    }
+    this.touchActiveTimer = setTimeout(() => {
+      this._isTouchActive = false
+    }, 10)
+
     setTimeout(() => {
       player.getPlugin('progress') && player.getPlugin('progress').resetSeekState()
     }, 10)

packages/xgplayer/src/plugins/pc/index.js

@@ -45,6 +45,16 @@ export default class PCPlugin extends BasePlugin {
     !enableContextmenu && media && media.addEventListener('contextmenu', this.onContextmenu, false)
   }
 
+  /**
+   * 检查Mobile插件是否正在处理touch事件，如果其正在处理touch事件，则不响应mouse事件
+   * @returns {boolean}
+   * @private
+   */
+  _isMobileTouchActive() {
+    const mobilePlugin = this.player?.plugins?.mobile
+    return !!mobilePlugin && mobilePlugin._isTouchActive === true
+  }
+
   switchPlayPause (e) {
     const { player } = this
     this.emitUserAction(e, 'switch_play_pause', { props: 'paused', from: player.paused, to: !player.paused })
@@ -55,15 +65,31 @@ export default class PCPlugin extends BasePlugin {
     }
   }
 
+  /**
+   * @param {MouseEvent} e
+   */
   onMouseMove = (e) => {
+    if (this._isMobileTouchActive()) {
+      e?.stopImmediatePropagation()
+      return
+    }
+
     const { player, playerConfig } = this
     if (!player.isActive) {
       player.focus({ autoHide: !playerConfig.closeDelayBlur })
       !playerConfig.closeFocusVideoFocus && player.media.focus()
     }
   }
 
+  /**
+   * @param {MouseEvent} e
+   */
   onMouseEnter = (e) => {
+    if (this._isMobileTouchActive()) {
+      e?.stopImmediatePropagation()
+      return
+    }
+
     const { playerConfig, player } = this
     !playerConfig.closeFocusVideoFocus && player.media.focus()
     if (playerConfig.closeDelayBlur) {
@@ -74,7 +100,15 @@ export default class PCPlugin extends BasePlugin {
     this.emit(ENTER_PLAYER)
   }
 
+  /**
+   * @param {MouseEvent} e
+   */
   onMouseLeave = (e) => {
+    if (this._isMobileTouchActive()) {
+      e?.stopImmediatePropagation()
+      return
+    }
+
     const { closePlayerBlur, leavePlayerTime, closeDelayBlur } = this.playerConfig
     if (!closePlayerBlur && !closeDelayBlur) {
       if (leavePlayerTime) {