diff --git a/packages/components/color-picker/src/utils/draggable.ts b/packages/components/color-picker/src/utils/draggable.ts
index 07455c5efb..2e612a8247 100644
--- a/packages/components/color-picker/src/utils/draggable.ts
+++ b/packages/components/color-picker/src/utils/draggable.ts
@@ -44,5 +44,5 @@ export function draggable(element: HTMLElement, options: DraggableOptions) {
}
element.addEventListener('mousedown', downFn)
- element.addEventListener('touchstart', downFn)
+ element.addEventListener('touchstart', downFn, { passive: false })
}
diff --git a/packages/components/slider/src/button.vue b/packages/components/slider/src/button.vue
index 1e390769a4..3342552fad 100644
--- a/packages/components/slider/src/button.vue
+++ b/packages/components/slider/src/button.vue
@@ -7,7 +7,6 @@
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
@mousedown="onButtonDown"
- @touchstart="onButtonDown"
@focus="handleMouseEnter"
@blur="handleMouseLeave"
@keydown="onKeyDown"
diff --git a/packages/components/slider/src/composables/use-slider-button.ts b/packages/components/slider/src/composables/use-slider-button.ts
index 0d5f1699e7..9613d1f10c 100644
--- a/packages/components/slider/src/composables/use-slider-button.ts
+++ b/packages/components/slider/src/composables/use-slider-button.ts
@@ -1,5 +1,6 @@
import { computed, inject, nextTick, ref, watch } from 'vue'
import { debounce } from 'lodash-unified'
+import { useEventListener } from '@vueuse/core'
import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { sliderContextKey } from '../constants'
@@ -273,6 +274,8 @@ export const useSliderButton = (
}
)
+ useEventListener(button, 'touchstart', onButtonDown, { passive: false })
+
return {
disabled,
button,
diff --git a/packages/components/slider/src/slider.vue b/packages/components/slider/src/slider.vue
index 7f764bd8ab..522143354a 100644
--- a/packages/components/slider/src/slider.vue
+++ b/packages/components/slider/src/slider.vue
@@ -8,8 +8,6 @@
:aria-labelledby="
range && isLabeledByFormItem ? elFormItem?.labelId : undefined
"
- @touchstart="onSliderWrapperPrevent"
- @touchmove="onSliderWrapperPrevent"
>
import { computed, provide, reactive, toRefs } from 'vue'
+import { useEventListener } from '@vueuse/core'
import ElInputNumber from '@element-plus/components/input-number'
import { useFormItemInputId, useFormSize } from '@element-plus/components/form'
import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'
@@ -235,6 +234,13 @@ const updateDragging = (val: boolean) => {
initData.dragging = val
}
+useEventListener(sliderWrapper, 'touchstart', onSliderWrapperPrevent, {
+ passive: false,
+})
+useEventListener(sliderWrapper, 'touchmove', onSliderWrapperPrevent, {
+ passive: false,
+})
+
provide(sliderContextKey, {
...toRefs(props),
sliderSize,
diff --git a/packages/components/virtual-list/src/builders/build-grid.ts b/packages/components/virtual-list/src/builders/build-grid.ts
index 9133ca1dfb..8cc6293d17 100644
--- a/packages/components/virtual-list/src/builders/build-grid.ts
+++ b/packages/components/virtual-list/src/builders/build-grid.ts
@@ -10,6 +10,7 @@ import {
resolveDynamicComponent,
unref,
} from 'vue'
+import { useEventListener } from '@vueuse/core'
import {
getScrollBarWidth,
hasOwn,
@@ -355,6 +356,10 @@ const createGrid = ({
}
)
+ useEventListener(windowRef, 'wheel', onWheel, {
+ passive: false,
+ })
+
const scrollTo = ({
scrollLeft = states.value.scrollLeft,
scrollTop = states.value.scrollTop,
@@ -648,7 +653,6 @@ const createGrid = ({
class: props.className,
style: unref(windowStyle),
onScroll,
- onWheel,
ref: windowRef,
},
!isString(Container) ? { default: () => Inner } : Inner
diff --git a/packages/components/virtual-list/src/builders/build-list.ts b/packages/components/virtual-list/src/builders/build-list.ts
index 73412a27fa..90636757bb 100644
--- a/packages/components/virtual-list/src/builders/build-list.ts
+++ b/packages/components/virtual-list/src/builders/build-list.ts
@@ -12,6 +12,7 @@ import {
resolveDynamicComponent,
unref,
} from 'vue'
+import { useEventListener } from '@vueuse/core'
import { hasOwn, isClient, isNumber, isString } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
import { useCache } from '../hooks/use-cache'
@@ -172,6 +173,10 @@ const createList = ({
}
)
+ useEventListener(windowRef, 'wheel', onWheel, {
+ passive: false,
+ })
+
const emitEvents = () => {
const { total } = props
@@ -463,7 +468,6 @@ const createList = ({
total,
onScroll,
onScrollbarScroll,
- onWheel,
states,
useIsScrolling,
windowStyle,
@@ -523,7 +527,6 @@ const createList = ({
class: [ns.e('window'), className],
style: windowStyle,
onScroll,
- onWheel,
ref: 'windowRef',
key: 0,
},
diff --git a/packages/components/virtual-list/src/components/scrollbar.ts b/packages/components/virtual-list/src/components/scrollbar.ts
index df3285e961..255e93a49a 100644
--- a/packages/components/virtual-list/src/components/scrollbar.ts
+++ b/packages/components/virtual-list/src/components/scrollbar.ts
@@ -119,7 +119,7 @@ const ScrollBar = defineComponent({
onselectstartStore = document.onselectstart
document.onselectstart = () => false
- thumbEl.addEventListener('touchmove', onMouseMove)
+ thumbEl.addEventListener('touchmove', onMouseMove, { passive: true })
thumbEl.addEventListener('touchend', onMouseUp)
}