单击鼠标滚轮后删除 :focus 及其样式

Question

遇到问题但没有解决方法。

我的 HTML 中有一些 link，我对其应用了 :hover 和 :focus+:active CSS 样式（这里是示例）： https://codepen.io/Auditive/pen/WVrRKJ

当我通过鼠标滚轮单击此类 link 时（用于在其他选项卡中打开）- :focus & :active CSS 样式仍然存在。

我正在寻找从点击的 link 中删除 :focus 和 :active 样式的方法。例如，也许像：

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

提前致谢。

Answer 1

没有测试代码，但我认为这会起作用：

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

Answer 2

首先，getElementsByTagName returns 一个没有 addEventListener 属性的 HTML 集合。您需要使用特定的 HTML 节点，例如 link[0]（您可以使用更具体的查询，例如为 link 提供一个 ID 并使用 getElementById）。

最重要的是，中键点击不会触发点击事件，但会触发 mouseup 事件，因此您可以使用事件的 which 属性来查找如果 mouseup 来自中间的单击按钮，则输出。

注意：为了在这个答案中制作一个片段，我使用了一个自执行函数来调用 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 3

首先你需要获取数组的第一个元素

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 4

添加 addEventListener "wheel" 或 "mousewheel" 并做你做的事，例如你的问题 use

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

然后输入你想要的代码

单击鼠标滚轮后删除 :focus 及其样式

Remove :focus and its style after mousewheel click

javascript

css

focus