react中阻止事件冒泡的坑

解决方法:

使用原生的事件监控

function MyBody(props: any) {
  const ScrollRef = useCallback((node) => {
    if (!node) {
      return;
    }
    node.addEventListener("touchstart", onTouchStart);
    node.addEventListener("touchmove", onTouchMove);
  }, []);

  const onTouchStart = (e: any) => {
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
  };

  const onTouchMove = (e: any) => {
    moveEndX = e.touches[0].pageX;
    moveEndY = e.touches[0].pageY;
    const X = moveEndX - startX;
    const Y = moveEndY - startY;

    if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      //从上往下滑,阻止事件冒泡
      e.stopPropagation();
    }
  };
 
  return (
    
{props.children}
); }

参考链接:https://www.cnblogs.com/Wayou/p/react_event_issue.html

你可能感兴趣的:(react中阻止事件冒泡的坑)