我有一个包含动态内容的容器,用户可以与之交互。它可以是 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
也在容器上触发或其他必须容器失去悬停状态并移除类。
答案 0 :(得分: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>