锚定标签不可点击，<a>标签</a>上方的可点击区域

Question

我有一些 HTML 结构与 CSS

Anchor 标记位于包装器中的某个位置（在哪里并不重要），并且由于包装器事件附加在 Angular 4 版本中的 div 上，因此它不可点击，只有包装器单击事件触发而不是链接事件。 没有冒泡发生或任何事情。

.wrapper {
  width: 250px;
  height: 250px
}

<div class="wrapper" (click)="someFunction()">
  <a (click)="someOtherFunction()"></a>
<div>

Answer 1

问题：为什么这两个事件都没有触发..？

回答： 因为在这里你已经将 div 包裹在锚标签上，这是一种内联容器标签，你也没有在锚标签内写任何文本。 这在 div 中没有任何意义。

尝试这个：

<div class="wrapper" (click)="someFunction()">
  <a (click)="someOtherFunction()">Click Here</a>
<div>

• 这样，当您单击链接时，都会触发两个事件。
• 当您单击链接之外的区域时，只会触发带有 div 的事件。