javascript - anchor 标签可跨屏幕宽度点击

Question

我正在开发一个小应用程序，发现了一个奇怪的错误。我目前在我的应用程序中使用 anchor 标记来表示按钮，我可以将它们更改为实际按钮，但我决定暂时坚持使用 anchor 标记。

但是，我注意到 anchor 标记在整个屏幕宽度上都是可点击的。有人可以指出为什么会这样吗？我假设我的 CSS 有问题。

请参阅下面的示例。

#commentList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display:block;
}

#commentList li a {
  width: 364px; 
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6; 
  padding: 12px;
  text-decoration: none;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  display: block;
}

<ul id="commentList">
  <li onclick=functionA() title="Activate function A."><a href="#" >Function A</a></li>
  <li onclick=functionB() title="Activate function B."><a href="#" >Function B</a></li>
  <li onclick=functionC() title="Activate function B."><a href="#" >Function C</a></li>
</ul>

Answer 1

那是因为你的onclick=functionA()是在li标签上，而不是在 anchor 标签上，而li跨越了整个宽度，因为它们是没有 width 设置的 block 元素。