Javascript 角度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>

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

---

您是否有任何解决方案仅在单击div的任何位置触发其单击事件？

据我所知，您可以使用css防止任何触发事件，例如添加输入和标签样式-指针事件：无

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

{{option}}

据我所知，您可以使用css阻止任何触发事件，例如添加输入和标签样式-指针事件：无

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

{{option}}

您应该使用

您应该使用

，因为您要做的是始终将父对象作为单击事件的目标，而不是子对象。您可以使用css属性

指针事件

设置为

无

通过以下方式

{{option}}

为什么这样做？

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

none

元素永远不是指针事件的目标；但是，如果子体的指针事件设置为其他值，指针事件可能以其子体元素为目标。在这些情况下，指针事件将在事件捕获/气泡阶段期间，在往返子代的过程中触发此父元素上的事件侦听器（视情况而定）

---

有关更多信息，您可以访问

，因为您要做的是始终将父对象作为单击事件的目标，而不是子对象。您可以使用css属性

指针事件

设置为

无

通过以下方式

{{option}}

为什么这样做？

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

none

元素永远不是指针事件的目标；但是，如果子体的指针事件设置为其他值，指针事件可能以其子体元素为目标。在这些情况下，指针事件将在事件捕获/气泡阶段期间，在往返子代的过程中触发此父元素上的事件侦听器（视情况而定）

有关更多信息，请访问

尝试以下操作：

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

然后只需将其添加到所需的元素：

<div click-stop-propagation>Stop Propagation</div>

停止传播

试试这个：

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

然后只需将其添加到所需的元素：

<div click-stop-propagation>Stop Propagation</div>

停止传播

如果要阻止默认行为，可以尝试将“$event.preventDefault（）”作为onChange方法的第一行。如果要阻止默认行为，可以尝试将“$event.preventDefault（）”作为onChange方法的第一行。欢迎使用stackoverflow，您的答案只包含关于代码的内容，需要在其中添加更多细节。有关StackOverflow中正确答案的更多信息，请参阅。这样更好吗？非常感谢您的反馈。是的，我对您的答案投了赞成票，因为它质量很好，谢谢您的合作，祝您好运……谢谢！它对我有用：）。我不知道这个css属性会出现在stackoverflow中，你的答案只是关于代码，需要在其中添加更多细节。有关StackOverflow中正确答案的更多信息，请参阅。这样更好吗？非常感谢您的反馈。是的，我对您的答案投了赞成票，因为它质量很好，谢谢您的合作，祝您好运……谢谢！它对我有用：）。我不知道这个css属性这是我决定在输入和标签上使用的。您应该编辑您的答案以写入指针事件，而不是opinter事件。但谢谢你的回答这就是我决定使用的输入和标签。您应该编辑您的答案以写入指针事件，而不是opinter事件。谢谢你的回答我对Philip说的这是我选择的解决方案但你的指针事件拼写错误我对Philip说的这是我选择的解决方案但你的指针事件拼写错误