Javascript 角度2防止子组件上的路由器导航单击

我有一个模板

<div (click)="handler()">
  <input type='checkbox' (click)="$event.stopPropagation()" (change)="$event.stopPropagation()">
</div>

我不想在复选框单击时执行任何操作，只想在div单击时进行路由

---

上述解决方案无效。

导航函数的第一个参数必须是数组

this.router.navigate(['path']);

或

您可以使用navigateByUrl

this.router.navigateByUrl('path');

---

由于您使用的是

$event.stopPropagation（）

当您单击复选框时，导航将不会发生，但当您仅单击div时，您将被导航到预期路线。

导航函数的第一个参数必须是数组

this.router.navigate(['path']);

或

您可以使用navigateByUrl

this.router.navigateByUrl('path');

---

由于您正在使用

$event.stopPropagation（）

当您单击复选框时，导航将不会发生，但当您只需单击div时，您将被导航到预期路线。

此设置适用于我：

<div (click)="onDivClick()">
  <mat-checkbox (click)="$event.stopPropagation()" (change)="onCheckboxChange($event)"></mat-checkbox>
</div>

...

onDivClick() {
  console.log('div clicked');
}

onCheckboxChange(event) {
  console.log(event);
}

...
onDivClick（）{
log（'div clicked'）；
}
onCheckboxChange（事件）{
console.log（事件）；
}

需要注意的重要事项：

MatCheckboxChange

事件类型没有

stopPropagation（）

函数，因此示例代码实际上应该在控制台中显示错误。

---

因此，您只想在复选框上单击

stopPropagation（）

。

此设置适用于我：

<div (click)="onDivClick()">
  <mat-checkbox (click)="$event.stopPropagation()" (change)="onCheckboxChange($event)"></mat-checkbox>
</div>

...

onDivClick() {
  console.log('div clicked');
}

onCheckboxChange(event) {
  console.log(event);
}

...
onDivClick（）{
log（'div clicked'）；
}
onCheckboxChange（事件）{
console.log（事件）；
}

需要注意的重要事项：

MatCheckboxChange

事件类型没有

stopPropagation（）

函数，因此示例代码实际上应该在控制台中显示错误。

---

---

因此，您只想在复选框上单击

stopPropagation（）

。

我发现我有一个包装复选框的标签。因此，我需要添加click事件来停止label元素的传播，我发现我有一个包装复选框的标签。因此，我需要添加click事件以停止label元素的传播

您能给我提供更多详细信息吗？例如，是否希望何时单击复选框？当用户点击文本时会发生什么？是否应该重定向？复选框是div的子元素。单击div意味着单击div元素内的任何内容，包括子元素。需要更多关于你想要实现什么的信息。但是为什么你需要这些呢？你能为你的问题添加更多细节吗？@BasheerKharoti我有一个公共项目组件，旁边有一个复选框和一个文本元素。因此，我将每个列表组件包装在一个div中，并希望停止子复选框，使其不在父div上传播。单击可以复制此复选框吗？请提供更多详细信息，例如，是否希望单击复选框？当用户点击文本时会发生什么？是否应该重定向？复选框是div的子元素。单击div意味着单击div元素内的任何内容，包括子元素。需要更多关于你想要实现什么的信息。但是为什么你需要这些呢？你能为你的问题添加更多细节吗？@BasheerKharoti我有一个公共项目组件，旁边有一个复选框和一个文本元素。因此，我将每个列表组件包装在一个div中，我想停止子复选框，使其不在父div上传播。单击“你能重现这个吗？你还没有理解这个问题。”。当点击复选框时，他打算停止传播，我确实理解，但他没有在任何地方使用选中或未选中的值。它将停止事件冒泡，这很好，但是按照他的代码，技术上没有使用复选框。他可能没有显示模型绑定，尽管

（change）=“$event.stopPropagation（）”

是他停止冒泡的意思。您还没有理解这个问题。当点击复选框时，他打算停止传播，我确实理解，但他没有在任何地方使用选中或未选中的值。它将停止事件冒泡，这很好，但是按照他的代码，技术上没有使用复选框。他可能没有显示模型绑定，尽管他想停止冒泡的是

（change）=“$event.stopPropagation（）”