如何避免子div调用父母的“`onDragLeave`”事件
如何避免子div调用父母的“`onDragLeave`”事件
提问于 2021-10-25 08:37:50
请看这个密码箱。
我有一个父div，它需要处理可拖放的事件(例如当文件被拖到上面时)。当调用onDragEnter时，我希望改变背景色。但是，我有一个子div，当它悬停在它上面时，它调用父div的onDragLeave事件。我尝试过在这个子div中使用ref来确定事件目标是否包含在子div中，但这似乎不起作用。如何避免子div响应调用onDragLeave事件？谢谢!
import React, { useState } from 'react';
const App = () => {
const [dragOver, setDragOver] = useState(false);
const preventDefaults = (event) => {
event.preventDefault();
event.stopPropagation();
};
const onDragEnter = (event) => {
preventDefaults(event);
console.log('ENTER');
if (!dragOver) {
setDragOver(true);
}
};
const onDragLeave = (event) => {
preventDefaults(event);
console.log('LEAVE');
setDragOver(false);
};
return (
<div
data-testid="document-upload"
onDragEnter={onDragEnter}
onDragLeave={onDragLeave}
style={{
background: dragOver ? 'green' : 'red',
height: '20rem',
width: '20rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div
style={{ border: '2px solid blue', height: '10rem', width: '10rem' }}
/>
</div>
);
};
export default App;回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-25 09:08:14
最简单的方法是在子pointerEvents: "none"的style支柱中设置<div>，从而忽略该div上所有与指针相关的事件。这会带来一些限制，比如您无法将单击事件绑定到子div。
如果这不符合应用程序的约束，可以修改onDragLeave处理程序以检查事件的relatedTarget (参见文档)。如果拖放离开父<div>，但输入父relatedTarget的子对象，则currentTarget (即父<div>)将包含(即子div) (见文档)。
下面是应该起作用的代码：
const onDragLeave = (event) => {
preventDefaults(event);
// This condition will be true when the drag leaves the parent for a child,
// but false when the drag leaves the parent for somewhere else.
if (event.currentTarget.contains(event.relatedTarget)) return;
console.log("LEAVE");
setDragOver(false);
};见这个密码箱。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69711768
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
