html - 有时链接在第一次点击时不起作用

Question

我曾经知道这个答案，但我这辈子都记不起来了。我到处寻找答案，但就是找不到。我有一个带有一些 anchor 的网页，如下所示:

<a onclick="make_ajax_request('list')">
  <div class="viewbar ">
    <div class="icon list">
      <img src="/icons/list.png"/>
    </div>
    <p>List</p>
  </div>
</a>

它们基本上是带有图片图标和文本的链接。它们大部分时间都有效，但有时您必须单击它们两次才能触发该功能。我记得这与没有“href”属性或 anchor 本身是内联 block 有关。但我已经尝试了一切都无济于事。有人知道我指的是什么吗？

Answer 1

您不应该包装 block 级元素，例如 <a> 等内联元素。其实this is fine now ，我的信息已经过时了。这很可能是造成麻烦的原因。一些(所有？)浏览器会在加载时尝试修复它，你最终可能会得到这样的结果:

<a onclick="make_ajax_request('list')"></a>
  <div class="viewbar ">
    <div class="icon list">
      <a><img src="#" /></a>
    </div>
    <p><a>List</a></p>
  </div>
<a></a>

无论如何，最好将 img 包装在标记中，然后使用 javasript 将对 div 的点击解释为对内部链接的点击。或者在您的情况下它实际上不是链接，只需执行以下操作:

  <div class="viewbar" onclick="make_ajax_request('list')">
    <div class="icon list">
      <img src="/icons/list.png"/>
    </div>
    <p>List</p>
  </div>

在你的CSS中

.viewbar { cursor: pointer; }