javascript - onfocus 与 onmouseout 冲突

Question

看看这个 JSFiddle:https://jsfiddle.net/em3ggdbs/3/

当我将鼠标悬停在文本输入上(使此工作正常)以及当文本输入具有焦点时(鼠标未悬停在文本上)，我需要文本输入周围的大边框将颜色从黑色更改为蓝色输入)(这部分不起作用)。

<div id="border_surrounding_input" style="border:20px solid #000000;padding:20px;">
<input type="text" id="my_text_input">
</div>

document.getElementById("my_text_input").onfocus=function() {
document.getElementById("border_surrounding_input").style.borderColor = "#0000ff";

};
document.getElementById("my_text_input").onblur=function() {
document.getElementById("border_surrounding_input").style.borderColor = "#000000";

};

document.getElementById("my_text_input").onmouseover=function() {
document.getElementById("border_surrounding_input").style.borderColor = "#0000ff";

};


document.getElementById("my_text_input").onmouseout=function() {
document.getElementById("border_surrounding_input").style.borderColor = "#000000";

};

Answer 1

问题是当您的鼠标移出或文本模糊事件发生时，边框颜色会发生变化，而不检查其他情况是否发生。

此处代码:JSFiddle

    isFocus = false;
isHover = false;

document.getElementById("my_text_input").onfocus=function() {
    isFocus = true;
setBorderColor();
};
document.getElementById("my_text_input").onblur=function() {
    isFocus = false;
    setBorderColor();

};

document.getElementById("my_text_input").onmouseover=function() {
    isHover = true;
    setBorderColor();
};


document.getElementById("my_text_input").onmouseout=function() {
    isHover = false;
    setBorderColor();
};

setBorderColor= function(){
        //isFocus = true;
        if(isFocus || isHover){
            document.getElementById("border_surrounding_input").style.borderColor = "#0000ff";
        }
        else{
            document.getElementById("border_surrounding_input").style.borderColor = "#000000";
        }
}