为什么在工具提示窗口中的 HTML 按钮上单击不触发

Why does onclick not fire for HTML button inside tooltip window?

本文关键字：单击 按钮 HTML 工具 提示窗口 为什么      更新时间：2023-09-26

以下一段HTML+JavaScript有什么问题？onclick中的alert()显然从未在工具提示窗口中调用过按钮。

我已经在几种浏览器上尝试过这个，例如Firefox 33.1。在工具提示的上下文之外（即通过从示例中删除class="tooltip"），它可以正常工作。工具提示仅依赖于 CSS，此处也对此进行了描述。

<html>
<head>
  <meta http-equiv="x-ua-compatible" content="IE=edge" />
  <style type="text/css">
    .cell {
      position:relative;
    }
    .tooltip {
      position:absolute;
      left:10px;
      top:10px;
      background-color:gray;
      z-index:100;
      width:200px;
    }
    .cell:active .tooltip { visibility:hidden !important; }
    .cell:hover .tooltip  { visibility:visible; }
    .tooltip              { visibility:hidden; }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>
        <div class="cell">
          CELL
          <div class="tooltip">
            <table>
              <tr>
                <td>KEY</td>
                <td>VALUE</td>
              </tr>
            </table>
            <form>
              <button type="button" onclick="alert('TEST');">EDIT</button>
            </form>  
          </div>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

此示例在IE8浏览器中运行良好。

对于FF浏览器和铬请评论此样式 

.cell:active .tooltip { visibility:hidden !important; }
一旦

您单击该按钮，hover类就会丢失，按钮就会消失。如果您要使用mouseover而不是单击，它将起作用：

          <button type="button" onMouseOver="alert('TEST');">EDIT</button>

小提琴：http://jsfiddle.net/yt9kvngr/

相关文章：