如何让mouseover事件同时处理p和父div

Question

我有一个嵌在div标签中的p标签。 div标签附有一个mouseover事件处理程序，p标签没有事件处理程序。 我希望能够触发鼠标悬停事件，无论我在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上 5：初始鼠标悬停文本后的按钮，现在鼠标悬停在文本上

我认为这与事件冒泡捕获有关，但我不确定。任何帮助，以便鼠标悬停是一致的将是伟大的。

还有一条信息，我还在div标签上附加了一个点击事件。单击div时单击事件可以正常工作，但当我的鼠标悬停在文本上时单击时它不起作用。

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);
}