React-resizable结合iframe触达minConstraints后鼠标释放仍无法停止缩放

我之前也碰到过类似的iframe和react-resizable冲突的问题，你的情况核心原因是iframe的鼠标事件捕获优先级干扰了react-resizable的状态判断：当缩放触达minConstraints后释放鼠标，iframe会继续捕获鼠标事件，导致react-resizable没正确接收到mouseup信号，误以为缩放操作还在进行，所以反向移动鼠标时盒子会持续变大。设置z-index:-1虽然能切断冲突，但直接牺牲了iframe的滚动功能，显然不是最优解。

下面给你两个可行的解决方案：

方案一：缩放过程中临时禁用iframe鼠标事件，结束后恢复 #

这个思路很直接：在开始缩放时，让iframe暂时不响应鼠标事件，确保react-resizable能完整捕获整个缩放流程的事件；缩放结束后再恢复iframe的鼠标交互，既解决冲突又保留滚动功能。

修改你的PDFDialog组件，关键代码调整如下：

function PDFDialog() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);
  const [x, setX] = React.useState(0);
  const [y, setY] = React.useState(0);
  // 添加状态控制iframe的鼠标事件权限
  const [iframePointerEvents, setIframePointerEvents] = React.useState('auto');

  return (
    <StyledDialog open={open} classes={{ root: classes.dialog, paper: classes.paper }} PaperComponent={PaperComponent} aria-labelledby="draggable-dialog" PaperProps={{ x: x, y: y, setX: setX, setY: setY }} >
      <ResizableBox 
        height={520} 
        width={370} 
        minConstraints={[370, 520]} 
        maxConstraints={[Infinity, Infinity]} 
        className={classes.resizable}
        // 开始缩放时禁用iframe鼠标事件
        onResizeStart={() => setIframePointerEvents('none')}
        // 缩放结束后恢复交互
        onResizeStop={() => setIframePointerEvents('auto')}
        onResize={(e) => {
          if (e.movementX !== 0) {
            setX((prev) => prev + e.movementX);
          } else if (e.movementY !== 0) {
            setY((prev) => prev + e.movementY / 2);
          }
        }} 
      >
        <DialogContent classes={{ root: classes.dialogContent }} id="draggable-dialog" >
          <IconButton className={classes.clearIcon} aria-label="Clear" onClick={() => setOpen(false)} >
            <ClearIcon />
          </IconButton>
          <iframe 
            className={classes.iframe} 
            src="http://www.orimi.com/pdf-test.pdf" 
            title="PDF test file" 
            width="100%" 
            height="100%"
            // 绑定鼠标事件状态
            style={{ pointerEvents: iframePointerEvents }}
          ></iframe>
        </DialogContent>
      </ResizableBox>
    </StyledDialog>
  );
}

方案二：提升缩放手柄的层级，确保事件优先被捕获 #

另一个思路是让react-resizable的缩放手柄始终处于iframe之上，这样鼠标操作手柄时，事件会优先被手柄捕获，不会被iframe干扰。

修改你的useStyles中.react-resizable-handle的样式，添加z-index确保层级高于iframe：

const useStyles = makeStyles({
  // ...其他样式
  resizable: {
    position: "relative",
    "& .react-resizable-handle": {
      position: "absolute",
      width: 20,
      height: 20,
      bottom: 0,
      right: 0,
      background: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
      backgroundPosition: "bottom right",
      padding: 3,
      backgroundRepeat: "no-repeat",
      backgroundOrigin: "content-box",
      backgroundSize: "cover",
      boxSizing: "border-box",
      cursor: "se-resize",
      // 添加这行提升手柄层级
      zIndex: 10
    }
  },
  // ...其他样式
});

这个方案适合不需要临时禁用iframe交互的场景，确保手柄始终能被正确点击和拖拽，避免事件被iframe拦截。

两种方案都能解决你遇到的问题，推荐优先尝试方案一，因为它更精准地针对缩放过程的事件冲突，不会影响正常状态下的iframe使用。

内容的提问来源于stack exchange，提问作者Leff