Angular 2複選框preventDefault

我正在創建一個Bootstrap複選框下拉菜單，並且這些選項被封裝在處理點擊的<a>標記中，但我在a-tag中也有<input type="checkbox">。Angular 2複選框preventDefault

當用戶按實際複選框而不是僅僅按<a>元素時，會出現我的問題。兩者都被點擊併發生一些衝突。複選框的選中狀態應該反轉，但不是。

在Angular1中，它只是在複選框單擊時使用preventDefault（），但在我的angular2測試中，它會停止複選框更新其狀態。

需要幫助，我做錯了什麼。

<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

我想相同的行爲上的複選框點擊作爲點擊鏈接到正確的時候。

來源

2016-03-15 jonassvensson

您應該檢查此操作。

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>

來源

2016-03-15 17:31:15 micronyks

是的。謝謝。所以我想解決方案是從 jonassvensson

是的......你有！ – micronyks

只需將;false添加到事件處理程序表達式即可。在preventDefault()

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

返回錯誤的結果，您如果在checkboxClick()

來源

2016-03-15 17:12:34

我認爲的preventDefault是默認angular2，不是嗎？ – eesdil

此評論https://github.com/angular/angular/issues/7277#issuecomment-188938815發給你：D說：「@eesdil atm，我們在每一個事件被阻止的默認情況下被派往WebWorker在這裏。相信我們正在停止傳播。「 =>發送到WebWorker的事件 –

是的，我可以看到，這是正確的。還檢查了源代碼，他們正在檢查回調的返回值，而不是改變它。記憶... – eesdil

返回false你爲什麼不使用event.stopPropagation()得到同樣的效果呢？它正在停止單擊以從複選框傳播到單擊處理程序...

來源

2016-03-15 17:25:32 eesdil

Angular 2複選框preventDefault

回答

相關問題