如何使搜索框即使在鼠标移出后仍保持蓝色？

Question

我写了一个脚本，让搜索框有一个默认的边框颜色，悬停边框颜色和点击边框颜色。有没有办法扩充这段代码，使之即使你在搜索框中点击后鼠标移到或移出，边框仍然是蓝色的？

var searchBar = $(".qstxtcommon");

$(searchBar).on("mouseover", function() {
  $(searchBar).css("border-color", "#666666")
});

$(searchBar).on("mouseout", function() {
  $(searchBar).css("border-color", "#b7b7b7")
});

$(searchBar).on( "click", function() {
  $(searchBar).css("border-color", "#3fa9f5");
});

Answer 1

这是因为在点击之后，mouseout / mouseover仍然有效...试试看

$(searchBar).on( "click", function() {
  $(searchBar).css("border-color", "#3fa9f5");
  $(searchBar).on("mouseout",null);
  $(searchBar).on("mouseover",null);
});

或

$(searchBar).on( "click", function() {
   $(searchBar).css("border-color", "#3fa9f5");
   $(searchBar).off("mouseout");
   $(searchBar).off("mouseover");
});

Answer 2

当然，您可以使用信号量

var searchBar = $(".qstxtcommon");
var clicked = false;

$(searchBar).on("mouseover", function() {
  if (!clicked) {
    $(searchBar).css("border-color", "#666666");
  }
});

$(searchBar).on("mouseout", function() {
  if (!clicked) {
    $(searchBar).css("border-color", "#b7b7b7");
  }
});

$(searchBar).on( "click", function() {
  clicked = true;
  $(searchBar).css("border-color", "#3fa9f5");
});