Question

我有一个包含动态内容的容器，用户可以与之交互。它可以是 YouTube 视频 (iframe) 等。

用户可以将图像拖放到此容器中，它将用他们的图像替换动态内容。

我知道由于动态内容，拖动事件在容器中的行为会不规律，所以我需要执行 pointer-events: none。

HTML 容器具有以下类 ant-upload-drag 和 ant-upload-drag-hover。 ant-upload-drag-hover 类仅在被拖动的图像位于容器顶部时才处于活动状态。

我的 CSS 类似于以下内容，其中 ant-upload-drag-container 包含我希望指针事件无法访问的动态内容：

.ant-upload-drag-hover {
  .ant-upload-drag-container {
    pointer-events: none;
  }
}

不幸的是，这不起作用。它会导致容器随着 ant-upload-drag-hover 类一遍又一遍地从容器中不断添加和删除而行为不正常。

与此同时，以下工作：

.ant-upload-drag {
  .ant-upload-drag-container {
    pointer-events: none;
  }
}

本质上，只要 .ant-upload-drag-container 始终为 pointer-events: none;，事情就会按预期进行，但如果 pointer-events: none 在悬停时动态触发，则事情不会按计划进行。

以下视频演示：

https://share.getcloudapp.com/ApuRgQlZ

第一个示例显示了所需的内容（当指针事件始终为无时）。第二个示例显示了当前状态（当指针事件被动态转换为始终无时）。

我知道这没什么好说的，但我不确定我是否从根本上误解了 pointer-events: none，或者是否发生了一些 React 渲染恶作剧。

据推测，当 ant-upload-drag-hover 类被添加到元素时，pointer-events: none 会触发，但似乎由于某种原因 pointer-events: none 也在容器上触发或其他必须容器失去悬停状态并移除类。

Answer 1

我不确定 pointer-events: none 是否会干扰拖放事件，但它可以解释您的错误。

我建议您改为在容器顶部放置一个层来捕获这些事件。

这是一个带有按钮的示例，图层每 3 秒切换一次（按类）。

// toggle class `ant-upload-drag-hover` every 3 seconds
setInterval(() => {
  document.querySelector(".ant-upload-drag").classList.toggle("ant-upload-drag-hover");
}, 3000);

.ant-upload-drag-container {
  position: relative;
}

.ant-upload-drag-hover .ant-upload-drag-container::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 999;
  height: 100%;
  width: 100%;
  /* the rest is just for aesthetics: */
  content: " .ant-upload-drag-hover";
  background: rgba(255, 255, 255, .5);
  cursor: not-allowed;
}

button {
  padding: 50px 100px;
}

button::before {
  content: "Click here: ";
}

<div class="ant-upload-drag">
  <div class="ant-upload-drag-container">
    <button onclick="++this.textContent">0</button>
  </div>
</div>

仅在拖动项目时禁用指针事件

1 个答案: