Javascript 如何使mouseover事件同时在p和parent div上工作

我有一个嵌套在div标记中的p标记。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);
    }

功能btnColorChange（evt）{
var evtTrgt=evt.target；
evtTrgt.style.backgroundColor=“rgb（41,82,204）”；
evtTrgt.style.color=“rgb（233234235）”；
evtTrgt.style.cursor=“指针”；
setTimeout（函数（）{
evtTrgt.style.color=“#330000”；
evtTrgt.style.backgroundColor=“rgba（41,82,163,5）”；
}, 800);
}
var the_btns=document.getElementsByClassName（“btn_ovrly”）；
对于（var i=0；i

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>

L文本

R文本

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

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

---

还有一条信息，我在div标签上附加了一个click事件。当我单击div时，click事件起作用，但当我在文本上单击时，click事件不起作用。

当鼠标可能仍在目标空间中时，设置一个超时来撤消鼠标悬停样式是不常见的。您是否希望在这方面做得更多：

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

---

这是一个很好的答案，但它仍然无法帮助我解决鼠标悬停是如何触发的，这取决于它是在div中的文本上还是仅在div上。您能否提供有关将remove事件侦听器放置在何处的更多信息？谢谢，我想我不明白你想看到什么样的行为。您是否试图使内部中的文本的行为与包含的div不同？您的意思可能是希望整个外部div作为一个块接收该行为？如果是，则将

evtTrgt=evt.target

的两个实例替换为：

var evtTrgt=evt.currentTarget

我希望中的文本与包含div的行为相同。根据鼠标悬停的内容，当前会发生3种不同的情况。如果我将鼠标悬停在包含div标记的边缘上，div和p标记的背景色将变为深蓝色，文本将变为白色。当我将鼠标移出时，它们都恢复为原来的颜色。但是如果我将鼠标移到文本上，只有文本背景会改变，当我将鼠标移到文本上时，文本背景会保持不变。您当前的目标建议有效。谢谢我以前没有使用过currentTarget。有什么理由不使用CSS悬停来实现此效果吗？