Typescript：“EventTarget”类型上不存在属性“className”

Question

我在我的代码中使用 draggable 是这样的：首先创建和 append 元素：

let myImg = document.createElement("img");
myImg.setAttribute('src', ...);
myImg.id = some_value;
myImg.className = "store_img";
myImg.draggable = true;

myImg.addEventListener('dragstart',function(event){
    event.dataTransfer?.setData("text", somedata);
    myImg.style.opacity = "0.5";

myImg.addEventListener('dragend',function(){
    mask.style.opacity = "1";
   
document.getElementById("myStorageDiv")?.appendChild(myImg);

之后，我在其他地方修改了“myStorageDiv”以允许接受可拖动：

document.getElementById("myArea")?.addEventListener('dragenter', 
function(event){
    event.preventDefault();
    if(event.dataTransfer?.getData("className") == "store_img"){
        this.style.backgroundColor = "red";
    }
}, false);

最后一行告诉我'EventTarget'上不存在className。 我想使用它的原因是我有两种类型的可拖动，每种只允许一个区域，我希望这些区域在进行任何更改之前识别可拖动的来源，例如'if(event.target.className = =“StoreImg”）{...}'。 我还注意到dataTransfer的数据只能在Drop中使用，所以我不能为dropenter和dropleave等其他人传递className。 有没有其他方法可以做到这一点？ 谢谢！

Answer 1

让我们看看我是否正确理解了您的问题，您想根据事件更改 myImg 的myImg并测试它当前具有哪个 class，对吗？

除了 TypeScript 之外，这应该很容易实现，这是一个示例（尝试拖动图像）：

 const myImg = document.querySelector("#my-img"); myImg.addEventListener("dragstart", () => { if (myImg.className == "blue") { alert("Element was blue, I guess."); } myImg.className = "red"; })

 .blue { border-style: solid; border-width: 10px; color: blue; }.red { border-style: solid; border-width: 10px; color: red; }

 <img id="my-img" class="blue" src="https://www.gravatar.com/avatar/95686594a8e10ec60422e9478e9d1785"></img>

这对你有用还是你得到一些 TypeScript 错误？ 如果你这样做，你可以在这里发布，我会尽力提供帮助。