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

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

代码在这里：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";
        }
}

Onfocus与onmouseout冲突

1 个答案: