首页 文章

在Angular中，当复选框有更改事件时，如何停止TR单击事件的传播（）？

提问于
浏览 次
1

我正在使用Angular 6.我有一个带有click事件的表行（ <TR> ） . 出于测试目的，我们只是说事件将"quack!"打印到控制台 . 这是HTML：

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

在组件中：

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

现在，在这一行中我有一个复选框 . 它's a Bootstrap 4 custom checkbox but I don'认为这是我需要解决的问题的实质内容 . 该复选框有一个自定义指令，它添加了 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() 函数触发，我不想要嘎嘎叫 .

每次单击该行时，"quack!"都会出现在控制台中，这是正确的 . 奇怪的是，当我点击复选框时，我得到两个嘎嘎声，然后 onChange() 处理程序触发 . 我想零嘎嘎，我期待一个，但我有两个！

  • 顺便说一句，当我通过点击空格键而不是点击来选中/取消选中复选框时，我仍然会得到一个嘎嘎声 . 我无法想象点击事件的来源 .

我将 (click)="$event.stopPropagation();" 添加到 <input> 元素，认为这样可以解决问题 . 当我点击复选框时，它让我只有一个嘎嘎声 . 我想要归零 . How can I prevent the click on the checkbox from propagating a click() event that triggers a quack()?

  • 顺便说一句，在添加该片段之后，用空格键切换复选框会产生零嘎嘎声 .
angular event-handling click

1 回答

  • 3

    答案

    我错误地认为它是一个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提到的任何一个解决方案都可以完美地运行 .

    回复于

相关问题