在Angular中，当复选框具有更改事件时，如何停止TR Click事件的stopPropagation()? [英] In Angular, how to stopPropagation() of TR click event when checkbox has change event?

问题描述

我正在使用Angular6.我有一个带有click事件的表行(<TR>).出于测试目的，我们只说事件打印嘎嘎！"到控制台.这是HTML:

I'm using Angular 6. I have a table row (<TR>) with a click event. For testing purposes let's just say the event prints "quack!" to the console. This is the HTML:

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

在组件中:

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

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

Now, within this row I have a checkbox. It's a Bootstrap 4 custom checkbox but I don't think that's material to the problem I need to solve. That checkbox has a custom directive which adds a change event handler (not a click event). A simplified version of the HTML is:

<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指令代码中:

In the my-directive directive code:

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

问题

我想要发生的事情是quack()函数在任何人单击该行时触发，除非他们单击该复选框.当他们选中或取消选中该复选框时，我希望触发自定义指令中的onChange()函数，并且我不想发出嘎嘎声.

The problem

What I want to happen is for the quack() function to fire when anyone clicks on the row, unless they click the checkbox. When they check or uncheck the checkbox, I want the onChange() function in the custom-directive to fire, and I want no quacking.

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

The "quack!" appears in the console once each time I click on the row, which is correct. What's odd is that when I click on the checkbox I get two quacks and then the onChange() handler fires. I'd like zero quacks, I expected one, but I got two!

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

我在<input>元素中添加了(click)="$event.stopPropagation();"，以为这可以解决问题.当我单击复选框时，它使我跌至只有一个嘎嘎声.我想降为零. 如何防止单击复选框传播触发quack()的click()事件?

I added (click)="$event.stopPropagation();" to the <input> element, thinking this would solve the problem. It brings me down to just one quack when I click on the checkbox. I'd like to get to zero. How can I prevent the click on the checkbox from propagating a click() event that triggers a quack()?

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

推荐答案

答案

我错误地认为它是Bootstrap 4自定义复选框是不重要的-实际上，这是解决我的问题的关键.在Bootstrap 4的这种用法中，<input>本身是不可见的！您在屏幕上看到的类似于复选框的内容实际上是由CSS生成的.因此，click事件首先不属于该<input>元素.

The Answer

I was wrong to assume that it being a Bootstrap 4 custom checkbox was immaterial -- in fact that was the key to my problem. In this usage of Bootstrap 4, the <input> itself is invisible! The thing you see on screen that looks like a checkbox is actually generated by CSS. So the click event wouldn't belong to that <input> element in the first place.

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

To solve the problem, I moved (click)="$event.stopPropagation();" to the <div> element that wraps the custom checkbox, like so:

<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提到的两种解决方案都可以很好地工作.

If I were using normal checkboxes instead of these Bootstrap 4 custom ones, either of the solutions mentioned by ConnorsFan would have worked perfectly.

这篇关于在Angular中，当复选框具有更改事件时，如何停止TR Click事件的stopPropagation()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！