From 843d07dec0fb59d903d7e4efe5340f68661f059c Mon Sep 17 00:00:00 2001
From: Naeemo <naeemo@qq.com>
Date: Wed, 4 Jan 2023 18:01:17 +0800
Subject: [PATCH] refactor(components): [image] use standard wheel event
 (#11107)

---
 .../image-viewer/src/image-viewer.vue         | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue
index fdab4ca1fb..d7c878ee6f 100644
--- a/packages/components/image-viewer/src/image-viewer.vue
+++ b/packages/components/image-viewer/src/image-viewer.vue
@@ -95,7 +95,7 @@ import { isNumber, useEventListener } from '@vueuse/core'
 import { throttle } from 'lodash-unified'
 import { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/constants'
-import { isFirefox, keysOf } from '@element-plus/utils'
+import { keysOf } from '@element-plus/utils'
 import ElIcon from '@element-plus/components/icon'
 import {
   ArrowLeft,
@@ -124,8 +124,6 @@ const modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {
   },
 }
 
-const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
-
 defineOptions({
   name: 'ElImageViewer',
 })
@@ -237,26 +235,17 @@ function registerEventListener() {
         break
     }
   })
-  const mousewheelHandler = throttle(
-    (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {
-      const delta = e.wheelDelta ? e.wheelDelta : -e.detail
-      if (delta > 0) {
-        handleActions('zoomIn', {
-          zoomRate: props.zoomRate,
-          enableTransition: false,
-        })
-      } else {
-        handleActions('zoomOut', {
-          zoomRate: props.zoomRate,
-          enableTransition: false,
-        })
-      }
-    }
-  )
+  const mousewheelHandler = throttle((e: WheelEvent) => {
+    const delta = e.deltaY || e.deltaX
+    handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {
+      zoomRate: props.zoomRate,
+      enableTransition: false,
+    })
+  })
 
   scopeEventListener.run(() => {
     useEventListener(document, 'keydown', keydownHandler)
-    useEventListener(document, mousewheelEventName, mousewheelHandler)
+    useEventListener(document, 'wheel', mousewheelHandler)
   })
 }