javascript - 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>

最佳答案

这是因为您的onclick=functionA()是在li标记上，而不是在锚标记上，并且li跨越整个宽度，因为它们是没有width设置的块元素。

关于javascript - anchor 标签在屏幕的整个宽度上都是可单击的，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58294596/