表格单元格含图片时点击事件监听器失效如何解决

点击图片时，事件的触发目标是<img>元素而非<td>单元格，你原来的e.target.matches("td")条件无法命中，导致逻辑不执行。

通过closest("td")方法获取点击元素所在的最近<td>单元格，不管点击的是单元格本身还是里面的图片，都能定位到目标单元格。修改后的代码如下：

const table = document.querySelector("tbody")
table.addEventListener("click", clickTile)

function clickTile(e){
    // 找到点击元素所属的td单元格
    const td = e.target.closest("td");
    if(td){
        const row = td.closest("tr").rowIndex
        const col = td.cellIndex
        placeImage(row, col)
    }
}

function placeImage(row, col){
    const cell = table.rows[row].cells[col]
    if(cell.innerHTML != ""){
        cell.innerHTML= ""
        return
    }
    
    cell.innerHTML = "<img src=\"image.png\" height=\"20px\" width=\"20px\"/>"
}

如果想更精准判断单元格内是否存在图片（避免单元格有其他文本时误判），可以改用元素查询的方式：

function placeImage(row, col){
    const cell = table.rows[row].cells[col]
    const existingImg = cell.querySelector("img");
    if(existingImg){
        existingImg.remove(); // 直接移除图片，比清空innerHTML更灵活
        return
    }
    
    // 用DOM创建方式生成图片，比拼接HTML更规范
    const newImg = document.createElement("img");
    newImg.src = "image.png";
    newImg.height = 20;
    newImg.width = 20;
    cell.appendChild(newImg);
}

内容的提问来源于stack exchange，提问作者helpmeplease