javascript - 检查 event.target 是否有 child

Question

 <h1>This is my Puzzle</h1>
<h3>by Julian Blaschke </h3>
<h4 id ="result">Its wrong<h4>

<table>
  <tr>
    <th>Puzzle</th>
  </tr>
  <tr>
 <td><div id="dropdiv1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  </tr>
  <tr>
 <td><div id="dropdiv4" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv5" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv6" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  </tr>
  <tr>
 <td><div id="dropdiv7" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv8" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv9" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  </tr>
 </table>



<table style="width:100%">
  <tr>
    <th>Puzzle</th>
  </tr>
  <tr>
    <td><img id="1" src="splitted\1.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="2" src="splitted\2.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="3" src="splitted\3.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="4" src="splitted\4.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="5" src="splitted\5.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="6" src="splitted\6.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>   
 <td><img id="7" src="splitted\7.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="8" src="splitted\8.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="9" src="splitted\9.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>

  </tr>
 </table>

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
  
if(ev.target.firstChild == null)
     ev.target.appendChild(document.getElementById(data));

     
}

function checkifright(){
document.getElementById("result").innerHTML =(document.getElementById("dropdiv1").firstChild.src);
if (document.getElementById("dropdiv1").firstChild.src == "file:///C:/Users/Julian/Desktop/SCHULE%20201617/BSD/HTML_JavaSccript/Blaschke_Puzzle/splitted/1.png")
if (document.getElementById("dropdiv2").firstChild.src == "file:///C:/Users/Julian/Desktop/SCHULE%20201617/BSD/HTML_JavaSccript/Blaschke_Puzzle/splitted/2.png")
  document.getElementById("result").innerHTML ="right";

}

如果目标已经有一个 child ，我如何检查 if 语句。在我的 if 中，它会附加一张图片两次，但应该只添加一次...

我不明白为什么。它应该可以正常工作，但它会在 3 次不进入 if 语句的情况下附加两次相同的图片

Answer 1

我遇到了同样的问题，并通过检查目标子节点的长度解决了它:

 if (ev.target.className == 'what_ever' && ev.target.childNodes.length == 0){
      ev.preventDefault();
    }

我希望您已经找到解决方案!