使用 onmouseover 和 onmouseout 事件进行无休止的事件传播？

问：

我正在努力使一个复选框在用户将鼠标悬停在表的第一个数据单元格上时出现。 我使用“firstDataCell.onmouseover”来添加复选框，并使用“firstDataCell.onmouseout”来删除它，这在复选框出现时起作用，但当您将鼠标悬停在它上面时，您无法单击该复选框，因为事件会传播。我认为解决方案是以某种方式在一个事件处于活动状态时停止另一个事件传播，但似乎无法使用“.stopPropagation（）”来解决它。代码如下：

let taskTable=document.querySelector('#table_1')
let tableBody=taskTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
let tableRowArr=[]
for(let i=0;i<tableBody.length;i++){
    tableRowArr.push(tableBody[i])
}
tableRowArr.forEach((row,index) => {
    let tableRowFirstDataCell=row.getElementsByTagName("td")[0]
    let cellData=tableRowFirstDataCell.innerHTML
    tableCellsData.push(cellData)
    tableRowFirstDataCell.onmouseover=addCheckboxes
})

function addCheckboxes(event){
        event.currentTarget.onmouseover=()=>{}
        event.currentTarget.innerHTML=""
        let checkBox=document.createElement("input")
        checkBox.setAttribute("type","checkbox")
        checkBox.setAttribute("class","check")
        // checkBox.setAttribute("") //<-----  Add styling to checkboxes
        // checkBox.addEventListener("onclick",deleteTask(id))
        event.currentTarget.appendChild(checkBox)
        event.currentTarget.onmouseout=removeCheckboxes
}
function removeCheckboxes(event) {
        event.currentTarget.onmouseout=()=>{}
        event.currentTarget.innerHTML=""
        event.currentTarget.innerHTML=tableCellsData[1]
        event.currentTarget.onmouseover=addCheckboxes
}