时间戳

首页 > 解决方案 > Angular 10 点击事件传播

javascript - Angular 10 点击事件传播

问题描述


我想通过单击其 html 父级的任何位置来手动修改输入复选框的值。

这是我的 HTML：

<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options">
    <input type="checkbox" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}">
    <label>{{option}}</label>
</div>

这是我的打字稿：

onChange($event): void {
    if ($event.target !== $event.currentTarget) {return;}
    $event.target.children[0].checked = !$event.target.children[0].checked;
}

当我单击 div 时，该事件正常工作。
当我点击标签时，事件被触发，标签作为目标并且没有按预期传递条件。
我希望事件传播会自动触发父事件，但事实并非如此。这似乎是 Angular 的默认行为，但我不太确定。

你有什么解决方案只触发 div 的点击事件，无论点击它吗？

标签： javascripthtmlangulareventsdom-events

解决方案

由于您尝试做的始终是将父级而不是子级作为单击事件的目标。您可以使用pointer-events设置为的 css 属性none。

通过以下方式，

<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options"> <input type="checkbox" style="pointer-events: none" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}"> <label style="pointer-events: none">{{option}}</label>

为什么这行得通？

正如 Mozilla MDN Web Docs 中所说，指针事件设置在什么情况下（如果有）特定图形元素可以成为指针事件的目标。在值的情况下none，

元素永远不是指针事件的目标；但是，如果这些后代将指针事件设置为其他值，则指针事件可能会针对其后代元素。在这些情况下，指针事件将在事件捕获/冒泡阶段期间适当地触发此父元素上的事件侦听器。

有关更多信息，您可以访问https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

推荐阅读