fix: reduce passive event warning of touchstart event (#10954)

packages/vant-use/src/useEventListener/index.ts

@@ -10,6 +10,16 @@ export type UseEventListenerOptions = {
   passive?: boolean;
 };
 
+export function useEventListener<K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (event: DocumentEventMap[K]) => void,
+  options?: UseEventListenerOptions
+): void;
+export function useEventListener(
+  type: string,
+  listener: EventListener,
+  options?: UseEventListenerOptions
+): void;
 export function useEventListener(
   type: string,
   listener: EventListener,
@@ -27,7 +37,10 @@ export function useEventListener(
     const element = unref(target);
 
     if (element && !attached) {
-      element.addEventListener(type, listener, { capture, passive });
+      element.addEventListener(type, listener, {
+        capture,
+        passive,
+      });
       attached = true;
     }
   };

packages/vant/src/image-preview/ImagePreviewItem.tsx

@@ -279,7 +279,7 @@ export default defineComponent({
       return (
         <SwipeItem
           class={bem('swipe-item')}
-          onTouchstart={onTouchStart}
+          onTouchstartPassive={onTouchStart}
           onTouchmove={onTouchMove}
           onTouchend={onTouchEnd}
           onTouchcancel={onTouchEnd}

packages/vant/src/index-bar/IndexBar.tsx

@@ -275,7 +275,7 @@ export default defineComponent({
         class={bem('sidebar')}
         style={sidebarStyle.value}
         onClick={onClickSidebar}
-        onTouchstart={touch.start}
+        onTouchstartPassive={touch.start}
         onTouchmove={onTouchMove}
       >
         {renderIndexes()}

packages/vant/src/number-keyboard/NumberKeyboard.tsx

@@ -280,10 +280,8 @@ export default defineComponent({
               unfit: !props.safeAreaInsetBottom,
               'with-title': !!Title,
             })}
-            onTouchstart={stopPropagation}
             onAnimationend={onAnimationEnd}
-            // @ts-ignore
-            onWebkitAnimationEnd={onAnimationEnd}
+            onTouchstartPassive={stopPropagation}
           >
             {Title}
             <div class={bem('body')}>

packages/vant/src/number-keyboard/NumberKeyboardKey.tsx

@@ -88,8 +88,8 @@ export default defineComponent({
     return () => (
       <div
         class={bem('wrapper', { wider: props.wider })}
-        onTouchstart={onTouchStart}
-        onTouchmove={onTouchMove}
+        onTouchstartPassive={onTouchStart}
+        onTouchmovePassive={onTouchMove}
         onTouchend={onTouchEnd}
         onTouchcancel={onTouchEnd}
       >

packages/vant/src/password-input/PasswordInput.tsx

@@ -78,7 +78,7 @@ export default defineComponent({
         <div class={bem()}>
           <ul
             class={[bem('security'), { [BORDER_SURROUND]: !props.gutter }]}
-            onTouchstart={onTouchStart}
+            onTouchstartPassive={onTouchStart}
           >
             {renderPoints()}
           </ul>

packages/vant/src/picker/PickerColumn.tsx

@@ -308,7 +308,7 @@ export default defineComponent({
     return () => (
       <div
         class={[bem(), props.className]}
-        onTouchstart={onTouchStart}
+        onTouchstartPassive={onTouchStart}
         onTouchmove={onTouchMove}
         onTouchend={onTouchEnd}
         onTouchcancel={onTouchEnd}

packages/vant/src/pull-refresh/PullRefresh.tsx

@@ -221,12 +221,8 @@ export default defineComponent({
       }
     );
 
-    // add passive option to avoid Chrome warning
-    useEventListener('touchstart', onTouchStart as EventListener, {
-      target: track,
-      passive: true,
-    });
-    useEventListener('touchmove', onTouchMove as EventListener, {
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
       target: track,
     });
 
@@ -244,6 +240,7 @@ export default defineComponent({
             ref={track}
             class={bem('track')}
             style={trackStyle}
+            onTouchstartPassive={onTouchStart}
             onTouchend={onTouchEnd}
             onTouchcancel={onTouchEnd}
           >

packages/vant/src/rate/Rate.tsx

@@ -279,7 +279,7 @@ export default defineComponent({
         tabindex={props.disabled ? undefined : 0}
         aria-disabled={props.disabled}
         aria-readonly={props.readonly}
-        onTouchstart={onTouchStart}
+        onTouchstartPassive={onTouchStart}
         onTouchmove={onTouchMove}
       >
         {list.value.map(renderStar)}

packages/vant/src/slider/Slider.tsx

@@ -301,7 +301,7 @@ export default defineComponent({
           aria-disabled={props.disabled || undefined}
           aria-readonly={props.readonly || undefined}
           aria-orientation={props.vertical ? 'vertical' : 'horizontal'}
-          onTouchstart={(event) => {
+          onTouchstartPassive={(event) => {
             if (typeof index === 'number') {
               // save index of current button
               buttonIndex = index;

packages/vant/src/stepper/Stepper.tsx

@@ -259,7 +259,7 @@ export default defineComponent({
         actionType = type;
         onChange();
       },
-      onTouchstart: () => {
+      onTouchstartPassive: () => {
         actionType = type;
         onTouchStart();
       },

packages/vant/src/swipe-cell/SwipeCell.tsx

@@ -220,7 +220,7 @@ export default defineComponent({
           ref={root}
           class={bem()}
           onClick={getClickHandler('cell', lockClick)}
-          onTouchstart={onTouchStart}
+          onTouchstartPassive={onTouchStart}
           onTouchmove={onTouchMove}
           onTouchend={onTouchEnd}
           onTouchcancel={onTouchEnd}

packages/vant/src/swipe/Swipe.tsx

@@ -440,7 +440,7 @@ export default defineComponent({
         <div
           style={trackStyle.value}
           class={bem('track', { vertical: props.vertical })}
-          onTouchstart={onTouchStart}
+          onTouchstartPassive={onTouchStart}
           onTouchmove={onTouchMove}
           onTouchend={onTouchEnd}
           onTouchcancel={onTouchEnd}

packages/vant/src/vue-tsx-shim.d.ts

@@ -12,5 +12,12 @@ declare module 'vue' {
     onTouchmove?: EventHandler;
     onTouchstart?: EventHandler;
     onTouchcancel?: EventHandler;
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+
+  interface HTMLAttributes {
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
   }
 }