Question

单击嵌入在详细信息摘要标记内的标记内的字体awesome项应该会导致访问该链接，而不是详细信息标记捕获click事件。这是预期的行为（我不这么认为）或HTML5中的错误？

<details>
 <summary>
  Details
  <a href="http://google.com">
   <i class="glyphicon glyphicon-plus"></i>
    Visit Google
  </a>
 </summary>
 <p> The Searching Site</p>
</details>

示例：https://codepen.io/anon/pen/GGgyNz 注意我认为codepen会覆盖外部链接，但单击Font Awesome标记时不应触发详细信息选项卡

Incase pen无效，完整HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Details Tag and Font Awesome Link Issue</h2>
  <details>
    <summary>
      Details
      <a href="http://google.com">
        <i class="glyphicon glyphicon-plus"></i> Visit Google
      </a>
    </summary>
    <p> The Searching Site</p>
  </details>
</div>

Answer 1

function changeLocation() {
  window.location = "www.google.com";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Details Tag and Font Awesome Link Issue</h2>
  <details>
    <summary>
        Details
        <span onclick="changeLocation()">
          <a>
            <i class="glyphicon glyphicon-plus"></i>
            Visit Google
          </a>
        </span>
    </summary>
    <p> The Searching Site</p>
  </details>
</div>

如果您包含在锚标记中，则我无法直接点击标记。 'onclick'活动将为您完成工作。

html5错误？详情＆gt;摘要＆gt;我标记了字体很棒的链接，而不是可点击的

1 个答案: