移除:鼠标滑轮单击后的焦点及其样式

Question

有问题没有解决这个问题的想法。

我的HTML中有一些链接，我应用了:悬停和:focus+:active CSS样式(下面是示例)：https://codepen.io/Auditive/pen/WVrRKJ

当我按鼠标按下这样的链接时(在其他选项卡中打开)：焦点&：活动的CSS样式仍然存在。

我正在寻找从点击链接中移除:focus & :active样式的方法。例如，可能有这样的感觉：

function RemoveFocus() {
  var link = document.getElementsByTagName("a");
  link.addEventListener("click", function() { 
      link.blur();
      });
}

提前谢谢。

Answer 1

首先，getElementsByTagName返回一个没有addEventListener属性的HTML。您需要使用像link[0]这样的特定的HTML (您可以使用更具体的查询，比如给链接一个id并使用getElementById)。

最重要的是，中间单击不会触发单击事件，但它会触发一个mouseup事件，因此您可以使用事件的which属性来确定鼠标是否来自中间单击按钮。

备注：为了在这个答案中生成一个片段，我使用了一个自动执行函数来调用RemoveFocus函数。

​

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400&display=swap');

body {
  background: #282828;
}

p {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  color: #8f8;
}

.block {
  width: 400px;
  height: 50px;
  border: 1px solid #787878;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  padding-top: 1%;
  margin-top: 2.5%;
  box-shadow: 0px 0px 4px 0px #fff8;
}

a, a:link, a:visited {
  font-family: 'Raleway', sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
}

a:hover, a:link:hover, a:visited:hover {
  font-weight: 300;
  background-image: linear-gradient(to right, #fff 42.5%, #4285f4, #ea4336, #fbbc04, #4285f4, #34a853, #ea4336);
  text-shadow: 0px 0px 1px #fff4;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*https://loading.io/spinners/comets/lg.comet-spinner.gif*/

a:focus, a:link:focus, a:visited:focus,
a:active, a:link:active, a:visited:active {
  color: transparent;
  background-image: url(https://loading.io/spinners/comets/lg.comet-spinner.gif);
  background-size: 20%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: border-box;
  text-shadow: none;
}

<body>
  <p />Click on link with mousewheel
  <div class="block">
    <a href="https://google.com" />Link 2 Google
  </div>
  <script>
      function RemoveFocus() {
      var link = document.getElementsByTagName("a");
      link[0].addEventListener("mouseup", function(e) {
        if( e.which == 2 ) {
          this.blur();
       }
      });
    }

    (function() {
        RemoveFocus();
    })();
  </script>
</body>

​

Answer 2

首先，需要获得数组的第一个元素。

var link = document.getElementsByTagName("a")[0];

然后处理两个事件：

link.addEventListener("click", clickHandle);

link.addEventListener("auxclick", clickHandle);

​

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p />Click on link with mousewheel
    <div class="block">
        <a href="https://www.google.ru/" />Link 2 Google
    </div>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Raleway:300,400&display=swap');

    body {
        background: #282828;
    }

    p {
        font-family: 'Raleway', sans-serif;
        text-align: center;
        font-size: 30px;
        font-weight: 300;
        color: #8f8;
    }

    .block {
        width: 400px;
        height: 50px;
        border: 1px solid #787878;
        border-radius: 5px;
        margin: 0 auto;
        text-align: center;
        padding-top: 1%;
        margin-top: 2.5%;
        box-shadow: 0px 0px 4px 0px #fff8;
    }

    a,
    a:link,
    a:visited {
        font-family: 'Raleway', sans-serif;
        font-size: 28px;
        font-weight: 300;
        color: #fff;
        text-decoration: none;
    }

    a:hover,
    a:link:hover,
    a:visited:hover {
        font-weight: 300;
        background-image: linear-gradient(to right, #fff 42.5%, #4285f4, #ea4336, #fbbc04, #4285f4, #34a853, #ea4336);
        text-shadow: 0px 0px 1px #fff4;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /*https://loading.io/spinners/comets/lg.comet-spinner.gif*/

    a:focus,
    a:link:focus,
    a:visited:focus,
    a:active,
    a:link:active,
    a:visited:active {
        color: transparent;
        background-image: url(https://loading.io/spinners/comets/lg.comet-spinner.gif);
        background-size: 20%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        -webkit-background-clip: border-box;
        text-shadow: none;
        font-weight: bold;
    }
    </style>
    <script>
    var link = document.getElementsByTagName("a")[0];

    function clickHandle(event) {
        //event.preventDefault();
        link.blur();

        return;
    }

    link.addEventListener("click", clickHandle);
    link.addEventListener("auxclick", clickHandle);
    </script>
</body>

</html>

​

Answer 3

没有对代码进行测试，但我认为这是可行的：

    function RemoveFocus() {
       var link = document.getElementsByTagName("a");
       link.addEventListener("click", function(e) { 
          if( e.which == 2 ) {
            e.preventDefault();
            link.blur();
          }
       });
    }