Question

我在tr和input内注册了事件处理程序-下面的代码。单击行就可以了，但是单击复选框会使呼叫rowClick() 之前 onChange()，因此我认为stopPropagation()和preventDefault()无法进行我所期望的。如何解决呢？我正在使用Angular6。

onChange($event:any) {
    $event.preventDefault();
    $event.stopPropagation();
}

<tr (click)="rowClick()">
  <td><input type="checkbox" (change)="onChange($event)"/></td>
</tr>

编辑柱塞here

Answer 1

基本上，您试图阻止输入的change事件，但问题是click事件冒泡到父tr元素。因此，您应该在该click上停止td事件。

更好的方法是将此DOM行为封装在指令中，并在需要时以声明方式使用它。

指令

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

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

HTML

<tr (click)="rowClick()">
  <td>
    <input stop-click-propagation type="checkbox" (change)="onChange($event)"/>
  </td>
</tr>

注意：请确保您在StopClickPropagation内注册NgModule才能使其正常工作。

不能因为事件冒泡而停止stopPropagation（）吗？

1 个答案: