javascript 我如何创建一个按钮，它可以显示一个链接，但有一个onfocusout事件在它上面工作？

x6yk4ghg 于 2023-06-20 发布在 Java

关注(0)|答案(2)|浏览(120)

考虑一下我的代码集：

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"></script>
    </head>
    <body style="color: black;">
        <button id="button" onclick="start()" onfocusout="start()">Look Down</button>
        <table>
            <tr>
                <td>
                    <a style="display: none;"; id="list" href="https://google.com/">Player-1</a>
                </td>
            </tr>
        </table>
    </body>
</html>

其中我的脚本文件是：

function start(){
    var a=document.getElementById("list").style;
    if(a.display=="none") a.display="block";
    else a.display="none";
}

function start() {
  var a = document.getElementById("list").style;
  if (a.display == "none") a.display = "block";
  else a.display = "none";
}

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
</head>

<body style="color: black;">
  <button id="button" onclick="start()" onfocusout="start()">Look Down</button>
  <table>
    <tr>
      <td>
        <a style="display: none;" ; id="list" href="https://google.com/">Player-1</a>
      </td>
    </tr>
  </table>
</body>

</html>

在这里，按下“向下看”按钮时显示链接Player-1。但是当我点击选项Player-1时，我失去了选项，因为我已经离开了按钮的焦点。结果，我无法转到我打算转到的链接。那我该怎么补救呢我的意思是我想按下按钮后点击链接，但不想出来的焦点。

JavaScript

来源：https://stackoverflow.com/questions/76497490/how-can-i-create-a-button-that-works-to-show-a-link-but-has-a-onfocusout-event-w

2条答案

按热度按时间

qncylg1j1#

行为

当用户单击<button>时，调用start()并显示<a>，很好。👍.
当用户点击<a>时，<button>失去了对<a>的焦点，这会触发<button>上的“focusout”事件，从而再次调用start()，这会删除<a>，bad。👎.

解决方案

1.只需删除onfocusout内联事件处理程序（参见图一和示例A）。
1.如果你想让<a>在点击 * <button>和<a>之外的任何东西时消失，那么你只想让<a>消失，而不是像start()那样在 * there * 和 * gone * 之间切换。要获得上述行为，请通过注册公共祖先元素并使“click”事件处理程序确定特定元素的特定行为来委托“click”事件（参见示例B和事件委托）。

- 图一**

<!-- WRONG -->
<button id="button" onclick="start()" onfocusout="start()"> 
  Look Down 
</button>

<!-- CORRECT -->
<button id="button" onclick="start()">
  Look Down 
</button>

示例A

- 布局更正**
<html>将只有一个<head>和一个<body>作为直接子节点。
<head>继续<body>。
<meta>、<title>、<link>和<style>在<head>中（最好按此顺序）。
<script>也可以在<head>中，但99%的时间应该位于<body>的最底部（换句话说：作为<body>的最后一个子元素，正好在结束标记之前：</body>）

<!DOCTYPE html>
<html>

<head>
</head>

<body style="color: black;">
  <button id="button" onclick="start()"> Look Down </button>
  <table>
    <tr>
      <td>
        <a href="https://example.com" id="list" style="display: none;">
          Player-1
        </a>
      </td>
    </tr>
  </table>
  <script src="script.js"></script>
  <script>
    function start() {
      const a = document.getElementById("list").style;
      a.display = a.display === "none" ? "block" : "none";
    }
  </script>
</body>

</html>

示例B

- 事件处理**
内联事件处理程序是垃圾。onclick和onfocusout已从<button>中删除。

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <button id="button"> Look Down </button>
  <table>
    <tr>
      <td>
        <a href="https://example.com" id="list" style="display: none;">
          Player-1
        </a>
      </td>
    </tr>
  </table>
  <script src="script.js"></script>
  <script>
    // Reference <a>
    const A = document.getElementById("list");

    // Reference <button>
    const B = document.getElementById("button");

    // Register the click event to the Document Object
    document.onclick = start;

    function start(event) {

      // Reference the element clicked by the user.
      const clicked = event.target;

      // Access <a> style property
      const a = A.style;

      // If the user clicked <button>...
      if (clicked === B) {

        // ...toggle <a> between "there" and "gone"...
        a.display = a.display === "none" ? "block" : "none";

        // ...or if the user clicked <a>...
      } else if (clicked === A) {

        // ...exit function...
        return;

        // ...otherwise...
      } else {

        // ...hide <a>
        a.display = "none";
      }
    }
  </script>
</body>

</html>

赞(0）回复(0）举报 2023-06-20

hgqdbh6s2#

不带JavaScript的解决方案（仅限CSS）

如果你用JS函数来解决这个问题，它将在页面其余部分的每次点击时运行。没有必要降低您的网站性能，并使用来自访问者的处理器能力。
这将是不使用JS的方法（链接显示为一个块，因此它可以具有过渡效果和延迟，允许人们在它消失之前点击它）：

#button:focus + table tr td #list {
  height: 20px !important;
}

#list{
  background:red;
  overflow:hidden;
  display:block;
  height:0px;
  transition: height 1s;
  transition-delay: 0.1s;
}

<!DOCTYPE html>
<html>
    <body style="color: black;">
        <button id="button">Look Down</button>
        <table>
            <tr>
                <td>
                    Content Before
                    <a id="list" href="https://example.com/">Player-1</a>
                    Content After
                </td>
            </tr>
        </table>
    </body>
</html>

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 我如何创建一个按钮，它可以显示一个链接，但有一个onfocusout事件在它上面工作？

2条答案

行为

解决方案

示例A

示例B

不带JavaScript的解决方案（仅限CSS）

相关问题

热门标签

最新问答