我如何在P和父div上都可以使用mouseover事件

Question

我有嵌套在div标签中的ap标签。 div标签具有附加的mouseover事件处理程序，p标签没有事件处理程序。 我希望能够触发mouseover事件，无论我将鼠标悬停在div标签中的任何位置 。 此时，取决于我是在文本上方还是在div标签的另一部分上方，鼠标悬停的触发方式有所不同。

function btnColorChange(evt){
        var evtTrgt = evt.target;
        evtTrgt.style.backgroundColor = "rgb(41, 82, 204)";
        evtTrgt.style.color="rgb(233, 234, 235)";
        evtTrgt.style.cursor = "pointer";

        setTimeout(function(){
            evtTrgt.style.color = "#330000";
            evtTrgt.style.backgroundColor = "rgba(41, 82, 163,.5)";
        }, 800);
    }

    var the_btns = document.getElementsByClassName("btn_ovrly");
    for (var i = 0; i < the_btns.length; i++){
        the_btns[i].addEventListener("mouseover", function(event){
            btnColorChange(event);
        }, true);
    }

HTML-包含相关代码的代码段

    <div id="chrts_ovrly">
        <div id="btn_ovrly_l" class="btn_ovrly"><p>L text</p></div>
        <div id="btn_ovrly_r" class="btn_ovrly"><p>R text</p></div>
    </div>

按钮说明：1：默认按钮状态2：将鼠标悬停在div而不是文本上时的按钮3：将鼠标悬停在文本上-文本颜色更改后的按钮4：最初将文本悬停在div之后现在将鼠标悬停在div上的按钮5：初始后鼠标悬停在文本上，现在鼠标悬停在仅文本上

我认为这与事件冒泡捕获有关，但我不确定。 任何有助于使鼠标悬停保持一致的帮助将非常有用。

还有一点信息，我还将div事件附加到click事件。 当单击div时，click事件起作用，但是当鼠标悬停在文本上方时，单击事件不起作用。

Answer 1

当鼠标可能仍在目标空间中时，设置超时以撤消鼠标悬停样式是不寻常的。 您是否可能想要以下方面的更多信息：

function btnColorChange(evt){
    var evtTrgt = evt.target;
    evtTrgt.style.backgroundColor = "rgb(41, 82, 204)";
    evtTrgt.style.color="rgb(233, 234, 235)";
    evtTrgt.style.cursor = "pointer";
    evtTrgt.addEventListener("mouseout", undo);
}

var c = document.getElementById("chrts_ovrly")
c.addEventListener("mouseover", function(event){
        btnColorChange(event);
    }, true);

function undo(evt) {
    var evtTrgt = evt.target;
    evtTrgt.style.color = "yellow";
    evtTrgt.style.backgroundColor = "gray";
    evtTrgt.removeEventListener("mouseout", undo);
}