我如何在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);
}