Question

onDragEnd事件侦听touchend或mouseup。如果触发了onDragEnd函数，则应删除touchmove和mousemove，但是它不起作用。在调用mousemove或touchmove之后如何正确删除touchend或mouseup事件？

来源：

const onDragEnd = () => {
    window.removeEventListener('touchmove', handleTouchMove);
    window.removeEventListener('mousemove', handleMouseMove);
    setIsDragging(false);
    setTranslate(0);
  };

  const handleMouseDown = event => {
    onDragStart(event.clientX);
    window.addEventListener('mousemove', handleMouseMove);
  };

  const handleTouchStart = event => {
    const touch = event.targetTouches[0];
    onDragStart(touch.clientX);
    window.addEventListener('touchmove', handleTouchMove);
  };

  useEffect(() => {
    window.addEventListener('touchend', onDragEnd);
    window.addEventListener('mouseup', onDragEnd);
    return () => {
      window.removeEventListener('touchend', onDragEnd);
      window.removeEventListener('mouseup', onDragEnd);
    };
  }, []);

Answer 1

您需要将与函数相同的引用传递给removeEventListener，就像以前addEventListener一样。

现在，由于您的功能位于功能组件内并且可以设置状态，因此将创建功能的新引用，因此无法正确删除事件。

您可以使用useCallback来记住函数引用，这将有助于删除事件

const handleTouchMove = useCallback(() => {
  }, []);
  const handleMouseMove = useCallback(() => {

  }, [])
  const onDragEnd = useCallback(() => {
    window.removeEventListener('touchmove', handleTouchMove);
    window.removeEventListener('mousemove', handleMouseMove);
    setIsDragging(false);
    setTranslate(0);
  }, []);

  const handleMouseDown = useCallback(event => {
    onDragStart(event.clientX);
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  const handleTouchStart = useCallback(event => {
    const touch = event.targetTouches[0];
    onDragStart(touch.clientX);
    window.addEventListener('touchmove', handleTouchMove);
  }, []);

  useEffect(() => {
    window.addEventListener('touchend', onDragEnd);
    window.addEventListener('mouseup', onDragEnd);
    return () => {
      window.removeEventListener('touchend', onDragEnd);
      window.removeEventListener('mouseup', onDragEnd);
    };
  }, []);

ReactJS。如何在创建的侦听器中删除事件侦听器？

1 个答案: