fix: do not process shortcut when event is default prevented

ljl11 · Feb 9, 2022 · d08ba7a · d08ba7a
1 parent f68c1ac
commit d08ba7a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/packages/griffith/src/components/Slider.tsx b/packages/griffith/src/components/Slider.tsx
@@ -171,20 +171,23 @@ class Slider extends Component<SliderProps, State> {
     const {reverse, value, total, step} = this.props
 
     let direction = 0
+    let handled = false
     if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      handled = true
       direction = -1
-    }
-    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+    } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      handled = true
       direction = 1
     }
-    if (reverse) {
-      direction = -direction
-    }
-
-    const result = clamp(value! + step! * direction, 0, total!)
-    if (result !== value) {
+    if (handled) {
       event.preventDefault()
-      this.handleChange(result)
+      if (reverse) {
+        direction = -direction
+      }
+      const result = clamp(value! + step! * direction, 0, total!)
+      if (result !== value) {
+        this.handleChange(result)
+      }
     }
   }
 

diff --git a/packages/griffith/src/components/usePlayerShortcuts.ts b/packages/griffith/src/components/usePlayerShortcuts.ts
@@ -76,6 +76,11 @@ const usePlayerShortcuts = ({
   })
 
   const handleKeyDown = useHandler((event: KeyboardEvent) => {
+    // 防止事件已经在别处被处理过（如 Slider 中）
+    if (event.defaultPrevented) {
+      return
+    }
+
     // 防止冲突，有修饰键按下时不触发自定义热键
     if (event.altKey || event.ctrlKey || event.metaKey) {
       return
@@ -105,6 +110,7 @@ const usePlayerShortcuts = ({
           onTogglePageFullScreen()
         }
         break
+
       case 'ArrowLeft':
         handleSeek(currentTime - 5)
         break
@@ -113,6 +119,15 @@ const usePlayerShortcuts = ({
         handleSeek(currentTime + 5)
         break
 
+      case 'ArrowUp':
+        // 可能静音状态调整时不切换为非静音会更好（设置临时状态，恢复音量时应用临时状态）
+        handleVolumeChange(volume + 0.05, true)
+        break
+
+      case 'ArrowDown':
+        handleVolumeChange(volume - 0.05, true)
+        break
+
       case 'j':
       case 'J':
         handleSeek(currentTime - 10)
@@ -140,15 +155,6 @@ const usePlayerShortcuts = ({
         handleVolumeChange(volume ? 0 : prevVolumeRef.current, true)
         break
 
-      case 'ArrowUp':
-        // 静音状态下调整可能不切换为非静音更好（设置一成临时的，切换后再应用临时状态）
-        handleVolumeChange(volume + 0.05, true)
-        break
-
-      case 'ArrowDown':
-        handleVolumeChange(volume - 0.05, true)
-        break
-
       case '<':
         rotatePlaybackRate('prev')
         break
@@ -167,11 +173,16 @@ const usePlayerShortcuts = ({
   })
 
   useEffect(() => {
-    const el = standalone ? document.body : root
-    if (el) {
-      el.addEventListener('keydown', handleKeyDown)
+    // 对于 React 16，需要使用 document 来处理冒泡（17 之后任何上层元素都能正常冒泡）
+    if (standalone) {
+      document.addEventListener('keydown', handleKeyDown)
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown)
+      }
+    } else if (root) {
+      root.addEventListener('keydown', handleKeyDown)
       return () => {
-        el.removeEventListener('keydown', handleKeyDown)
+        root.removeEventListener('keydown', handleKeyDown)
       }
     }
   }, [handleKeyDown, root, standalone])