javascript - Firefox 中带有下拉菜单行为的 onclick 链接

Question

我有一个带有导航栏菜单的 HTML 文档。菜单上的其中一项有一个带有可点击链接的下拉菜单。在 Chrome 和 IE 中一切正常，但在 Firefox 中下 zipper 接中的链接有问题。

这是代码。我试图只保留相关部分，希望我没有不小心删除任何重要内容:

   #menu-items {
     height: 100%;
     display: inline-block;
     white-space: nowrap;
   }
   
   #menu-items li {
     height: 100%;
     vertical-align: middle;
     text-align: center;
     display: inline-block;
     float: left;
   }
   
   #menu-items a {
     text-decoration: none;
   }
   
   .dropdown {
     position: relative;
     display: inline-block;
   }
   
   .dropdown-content {
     display: none;
     z-index: 1;
     position: absolute;
     top: 10px;
     left: 10px;
   }
   
   .dropdown-content a {
     padding-left: 11px;
     padding-right: 9px;
     text-decoration: none;
     display: block;
   }
   
   .dropdown:hover .dropdown-content {
     display: block;
   }

<div id="nav-bar">
  <div id="menu">
    <div id="menu-items">

      <a href="item_1.html">
        <li>item_1</li>
      </a>
      <li class="dropdown" style="cursor: pointer;" onclick="window.location='item_2.html';">
        <div class="dropdown"><a href="item_2.html">item_2</a>
          <div class="dropdown-content">
            <a href="item_2a.html">item_2a</a>
            <a href="item_2b.html">item_2b</a>
            <a href="item_2c.html">item_2c</a>
            <a href="item_2d.html">item_2d</a>
          </div>
        </div>
      </li>
      <a href="item_3.html">
        <li>item_3</li>
      </a>
    </div>
  </div>
</div>

在 HTML 代码中，onclick="window.location='item_2.html';" 在那里是因为我希望导航栏菜单项中的整个框都可以点击，而不仅仅是文本在它里面 - 这是我发现实现这种情况的唯一方法 - 例如，我尝试过将 anchor 标记放在该列表项的外部，以及我现在不记得的其他几种解决方案.但是，onclick 解决方案似乎使下拉菜单中的链接都指向 item_2.html，而不是 item_2a.html等。同样，这只是 Firefox 中的问题。

有谁知道解决这个问题的方法吗？

Answer 1

我想出了一个解决办法。我向 <div class="dropdown-content"> 添加了一些内联 javascript包含 stopPropagation()功能。 HTML 现在显示为:

<div id="nav-bar">
  <div id="menu">
    <div id="menu-items">

      <a href="item_1.html">
        <li>item_1</li>
      </a>
      <li class="dropdown" style="cursor: pointer;" onclick="window.location='item_2.html';">
        <div class="dropdown"><a href="item_2.html">item_2</a>
          <!--HERE'S THE CHANGE-->
          <div class="dropdown-content" onclick="(function(e) { e.stopPropagation(); })(event)">
            <a href="item_2a.html">item_2a</a>
            <a href="item_2b.html">item_2b</a>
            <a href="item_2c.html">item_2c</a>
            <a href="item_2d.html">item_2d</a>
          </div>
        </div>
      </li>
      <a href="item_3.html">
        <li>item_3</li>
      </a>
    </div>
  </div>
</div>

我在 Chrome、IE 和 Firefox 中对其进行了简短测试，它在所有 3 个中都有效，所以这似乎可以解决问题。