美文网首页
react中阻止事件冒泡的坑

react中阻止事件冒泡的坑

作者: 阳光小美女king | 来源:发表于2020-06-18 10:00 被阅读0次

解决方法:

使用原生的事件监控

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 (
    <div className="list-check-view" ref={ScrollRef}>
      {props.children}
    </div>
  );
}

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

相关文章

网友评论

      本文标题:react中阻止事件冒泡的坑

      本文链接:https://www.haomeiwen.com/subject/nfbyxktx.html