防止主机监听器在标签内的 div 上调用两次

Question

我有一个用标签标签包裹的 div 元素。标签标签具有复选框元素。当我从我的指令（通过 hostListener）获得点击事件值时，我的 指令在标签内的 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>

使用 home 指令点击 div 时的输出：-

enter image description here

Answer 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