javascript - 我如何不允许使用javascript在已经有图像的正方形上放置事件？

Question

这是我的代码。一个简单的井字游戏。一切正常，我似乎无法弄清楚如何不允许在一个 div 上放置多个图像。如果有人可以帮助我就如何实现这一点提出任何建议，我将不胜感激。

谢谢 ：）

function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }
    function drop(ev) {
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        ev.preventDefault();

        if (data == "dog1" || data == "dog2" || data == "dog3" || data == "dog4" || data == "dog5") {
                ev.target.style.backgroundColor = 'red';
                ev.target.setAttribute("selected", "dog");
        }

        else if(data == "dragon1" || data == "dragon2" || data == "dragon3" || data == "dragon4" || data == "dragon5") {
                ev.target.style.backgroundColor = 'green';
                ev.target.setAttribute("selected", "dragon");
        }

        var array = new Array(
         document.getElementById("square1").getAttribute("selected"),
         document.getElementById("square2").getAttribute("selected"),
         document.getElementById("square3").getAttribute("selected"),
         document.getElementById("square4").getAttribute("selected"),
         document.getElementById("square5").getAttribute("selected"),
         document.getElementById("square6").getAttribute("selected"),
         document.getElementById("square7").getAttribute("selected"),
         document.getElementById("square8").getAttribute("selected"),
         document.getElementById("square9").getAttribute("selected"));

        if (array[0] == "dog" && array[1] == "dog" && array[2] == "dog") 
            alert("dog Wins!");
        else if (array[0] == "dragon" && array[1] == "dragon" && array[2] == "dragon")
            alert("dragon Wins");
        else if (array[3] == "dog" && array[4] == "dog" && array[5] == "dog")
            alert("dog Wins!");
        else if (array[3] == "dragon" && array[4] == "dragon" && array[5] == "dragon")
            alert("dragon Wins");
        else if (array[6] == "dog" && array[7] == "dog" && array[8] == "dog")
            alert("dog Wins!");
        else if (array[6] == "dragon" && array[7] == "dragon" && array[8] == "dragon")
            alert("dragon Wins");
        else if (array[0] == "dog" && array[3] == "dog" && array[6] == "dog")
            alert("dog Wins!");
        else if (array[0] == "dragon" && array[3] == "dragon" && array[6] == "dragon")
            alert("dragon Wins");
        else if (array[2] == "dog" && array[5] == "dog" && array[8] == "dog")
            alert("dog Wins!");
        else if (array[2] == "dragon" && array[5] == "dragon" && array[8] == "dragon")
            alert("dragon Wins");
        else if (array[6] == "dog" && array[4] == "dog" && array[2] == "dog")
            alert("dog Wins!");
        else if (array[6] == "dragon" && array[4] == "dragon" && array[2] == "dragon")
            alert("dragon Wins");
        else if (array[0] == "dog" && array[4] == "dog" && array[8] == "dog")
            alert("dog Wins!");
        else if (array[0] == "dragon" && array[4] == "dragon" && array[8] == "dragon")
            alert("dragon Wins");
        else if (array[1] == "dog" && array[4] == "dog" && array[7] == "dog")
            alert("dog Wins!");
        else if (array[1] == "dragon" && array[4] == "dragon" && array[7] == "dragon")
            alert("dragon Wins");
}

Answer 1

检查元素是否已经有<img/>-descendant：

function drop(ev) {
  if(ev.target.getElementsByTagName('img').length){
    alert('invalid move');return false;
  }
  //continue with your code
}