Question

我正在制作一个Bootstrap复选框下拉菜单，选项包含在处理点击的<a>标签中，但我在a-tag中也有一个<input type="checkbox">。

当用户按下实际的复选框而不是<a>元素时，会出现问题。两者都被点击，发生了一些冲突。复选框check-state应该被反转，但不是。

在Angular1中，只需在复选框上单击使用preventDefault（），但在我的angular2-test中，它会阻止复选框更新其状态。

需要帮助我做错了。

<ul>
    <li *ngFor="#option of options">
    <a href="" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
        <input type="checkbox" [checked]="isSelected(option)" (click)="checkboxClick($event)" /> {{ option.name }}
    </a>
  </ul>

Plunker：https://plnkr.co/edit/6D5GQ9mnaMALNnPzf5Na

单击右侧的链接时，单击复选框时我想要相同的行为。

Answer 1

只需将;false添加到事件处理程序表达式即可。在preventDefault()

中返回错误结果

<input type="checkbox" [checked]="isSelected(option)" (click)="checkboxClick($event);false" /> {{ option.name }}

如果在checkboxClick()

中返回false，则会获得相同的效果

Answer 2

你应该检查一下。

https://plnkr.co/edit/jyX1hGNlRk0dNsR0XMXU?p=preview

<ul>
    <li *ngFor="#option of options">
            <a href="#" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
            <input type="checkbox" [checked]="isSelected(option)" (keyup)="checkboxClick($event)" /> {{ option.name }}
            </a>
     </li>
</ul>

Answer 3

为什么不使用event.stopPropagation()？它阻止点击从复选框传播到点击处理程序...

Angular 2 Checkbox preventDefault

3 个答案: