打字稿：“EventTarget”类型上不存在属性“className”

Question

我在我的代码中使用 draggable，如下所示： 首先创建和附加元素：

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 的类并测试它当前具有哪个类，对吗？

除了 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 错误？如果你愿意，你可以在这里发布，我会尽力提供帮助。