时间戳

首页 > 解决方案 > 由于事件冒泡顺序，不能`stopPropagation()`？

angular - 由于事件冒泡顺序，不能`stopPropagation()`？

问题描述

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>

在这里编辑 Plunker

标签： angularangular6

解决方案

基本上你试图阻止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以使其正常工作。

推荐阅读