pmndrs / use-gesture

👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
https://use-gesture.netlify.app
MIT License
9.04k stars 308 forks source link

[@use-gesture/vanilla] Touch event was abnormally interrupted. #664

Open mchao123 opened 6 months ago

mchao123 commented 6 months ago

Describe the bug

console error: actions-fe213e88.esm.js:332 Unable to preventDefault inside passive event listener invocation.

Sandbox or Video

The tug event will be abnormally interrupted, and the problem only occurs on emulated devices and cell phones


<script setup lang="ts">
import { DragGesture } from "@use-gesture/vanilla";
import anime from "animejs";
import { type Directive } from "vue";

let gesture: DragGesture;

const vDarg: Directive = { mounted(el, binding, vnode, prevVnode) { gesture = new DragGesture(el, ({ active, movement: [mx, my],...e }) => { console.log(active,my,e) anime({ targets: el, translateY: active ? my : 0, duration: active ? 0 : 1000 }); }, { preventDefault: true, filterTaps: true }); }, unmounted(el, binding, vnode, prevVnode) { gesture.destroy(); } }


**Information:**
 - Use Gesture version: v10.3.1
 - Browser Edge、Chrome

**Checklist:**
  - [x] I've read the [documentation](https://use-gesture.netlify.app/).
  - [x] If this is an issue with drag, I've tried setting `touch-action: none` to the draggable element.
mchao123 commented 6 months ago

It's my problem.

*{
  touch-action: none;
}