防止主機監聽器在標籤內的div上調用兩次

我有一個用標籤標籤包裝的div元素。標籤標籤有複選框元素。當我從我的指令（通過hostListener）獲取單擊事件值時，我的指令在標籤內部調用了div的兩倍，而在複選框中調用了其他值。我怎樣才能一次調用我的指令？防止主機監聽器在標籤內的div上調用兩次

我的指令

import { Directive, HostListener } from '@angular/core'; 

@Directive({ 
selector: '[home]' 
}) 
export class HomeDirective { 
@HostListener('click', ['$event.target']) onclick(data: any) { 
    console.log(data); 
} 
}

我的HTML，

<div> 
<label for="test"> 
    <div home>test dataa 
    <input type="checkbox" id="test" /> 
    </div> 
</label> 
</div>

輸出當點擊與家庭指導DIV： -

enter image description here

來源

2016-09-17 gaurav soni

問題是，當你點擊「測試數據「，這會觸發指令點擊事件（第1條指令點擊）。此文本是標籤的一部分。當您點擊標籤時，將點擊「for」標籤中指定的項目（第二個指令點擊）。

要防止雙擊，您應該從div移動文本。

<div> 
<label for="test"> 
    test dataa 
    <div home> 
    <input type="checkbox" id="test" /> 
    </div> 
</label> 
</div>

http://plnkr.co/edit/TyxkmhLlvKszXYarXXvr?p=preview

來源

2016-09-17 12:51:07 Alexandr

好！那現在工作。但是我擁有點擊它的卡片，然後再次點擊它。我所有的卡片數據（包括圖片和圖標）都在div內，我的指令（適用於該div）通過在卡片上添加翻轉類來翻轉卡片。您的解決方案是否會影響我的圖片和圖標的CSS？ –

1.請描述你期待的行爲。 2.提供所有代碼。我怎麼能說這個改變會影響沒有這個的東西？改變文字的位置不應該影響圖像。但移動類可以應用不同的風格，取決於CSS。 – Alexandr

防止主機監聽器在標籤內的div上調用兩次

回答

相關問題