Angular 卡中一个字段上的角度阻止单击事件

我有一堆看起来有点像

当点击时，他们将进入另一个页面。我通过使用

（单击）

事件来实现这一点。类似于包含HTML的页面上的

（单击）=“goToFunction（）”

<div (click)="goToFunction()">
  <p>Words here</p>
  <select></select>
</div>

这里的话

不幸的是，这也会导致在下拉元素上发生单击。有没有办法省略此单击的下拉列表

我尝试将单击事件附加到下拉列表中，在该事件中有一个

event.stopPropagation（）

。我还尝试了

返回false

。这两个都不起作用

---

有什么想法吗？我真的不想在卡片上有一个“单击此处”链接来解决这个问题。

你能不能将下拉列表封装在它自己的容器中，该容器没有路由绑定或其他方式

这里的话

...

是的，他可以这样做（Michael D解决方案）或使用带有routerLink的a标记，这样就不需要函数绑定。

您可以创建一个指令来停止事件传播

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: "[stop-event-propagation]"
})
export class StopEventPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

在Html中添加指令属性名

<div (click)="goToFunction()">
      <h1>Words here</h1>
      <h2>Words here</h2>    
      <select  stop-event-propagation>
        <option>Test</option>
      </select>
  <h3>Words here</h3>
  <h4>Words here</h4>
</div>

这里的话
这里的话
试验
这里的话
这里的话

---

这是stackblitz

您可以获取事件的目标，并检查它是否是选择框

请注意，事件目标上有许多属性，有时它们在浏览器之间有所不同。除了标记名之外，可能还有更合适的属性，具体取决于您的最终用例

请参见此处的示例：

这里的话

goToFunction（事件：MouseEvent）{
日志（'click event'，event，event.target）；
//这是一个使用target.tagName的示例，但请检查日志中的event.target，也许有更适合您的用例的内容
if（（event.target）.tagName==“选择”）{
//什么也不做，这是选择
log（“您确实单击了选择按钮”）
}否则{
log（“您没有单击选择按钮”）
}
}

请将您的代码放入独立的IDE（如stackblitz）中。不幸的是，它必须位于该分区内，因为如果他们单击下拉列表之外的内容，则应该指向该链接。它也是一个更大表单的一部分，并且有更多的代码使其工作欢迎使用StackOverflow。请考虑给出一个代码示例。