angular - 在Angular中，当复选框有更改事件时，如何停止TR单击事件的Propagation()？

Question

我正在使用 Angular 6。我有一个带有点击事件的表行 ( <TR> )。出于测试目的，我们假设事件打印“嘎嘎!”到控制台。这是 HTML:

<tr *ngFor="let t of things" (click)="quack()">
  ...
</tr>

在组件中:

quack() {
  console.log('quack!');
}

现在，在这一行中我有一个复选框。这是一个 Bootstrap 4 自定义复选框，但我认为这对我需要解决的问题并不重要。该复选框有一个自定义指令，用于添加 change 事件处理程序(而不是 click 事件)。 HTML 的简化版本是:

<tr *ngFor="let t of things" (click)="quack()">
  ...
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="cb{{t.id}}" name="cb{{t.id}}" 
     [my-directive]="b.somedata">
    <label class="custom-control-label" for="cb{{t.id}}">&nbsp;</label>
  </div>
  ...
</tr>

在 my-directive 指令代码中:

@HostListener('change') onChange() {
  // do some stuff...
}

问题

我想要发生的是quack()函数在任何人单击该行时触发，除非他们单击复选框。当他们选中或取消选中复选框时，我想要 onChange()自定义指令中的函数要触发，我不想嘎嘎叫。

“嘎嘎!”每次我单击该行时，都会在控制台中出现一次，这是正确的。奇怪的是，当我点击复选框时，我得到两个嘎嘎声，然后是 onChange()处理程序起火。我想要零个庸医，我期望有一个，但我得到了两个!

• 顺便说一句，当我通过按空格键而不是单击来选中/取消选中复选框时，我仍然会听到嘎嘎声。我无法想象点击事件从何而来。

我添加了(click)="$event.stopPropagation();"到<input>元素，认为这可以解决问题。当我点击复选框时，它让我只剩下一声庸医。我想归零。 如何防止单击复选框传播 click()触发 quack() 的事件？

• 顺便说一句，添加该代码片段后，使用空格键切换复选框会产生零嘎嘎声。

Answer 1

答案

我错误地认为它是一个 Bootstrap 4 自定义复选框无关紧要——事实上，这是我问题的关键。在 Bootstrap 4 的这种用法中，<input>本身是看不见的!你在屏幕上看到的看起来像复选框的东西实​​际上是由 CSS 生成的。所以click事件不属于 <input>元素放在第一位。

为了解决这个问题，我搬了(click)="$event.stopPropagation();"到<div>包装自定义复选框的元素，如下所示:

<tr *ngFor="let t of things" (click)="quack()">
  ...
  <div class="custom-control custom-checkbox" (click)="$event.stopPropagation();">
    <input type="checkbox" class="custom-control-input" id="cb{{t.id}}" name="cb1" 
     [my-directive]="b.somedata">
    <label class="custom-control-label" for="cb{{t.id}}">&nbsp;</label>
  </div>
  ...
</tr>

如果我使用普通复选框而不是这些 Bootstrap 4 自定义复选框，ConnorsFan 提到的任一解决方案都会完美运行。