Question

在点击事件上使用HostListener并尝试停止传播该事件时，实际元素上的点击处理程序仍会触发。

下面是相关代码和一个堆栈闪电示例。

// Directive
@Directive({
  selector: '[appDirective]'
})
export class AppDirective {
  @HostListener('click', ['$event']) onClick($event: Event) {
    $event.preventDefault();
    $event.stopPropagation();
    alert('i tried to prevent this...');
  }
}

// HTML
<button (click)="doSomething()" appDirective>Click Me</button>

// Click handler
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';

  doSomething() {
    alert('I was not prevented.');
  }
}

我做错什么了吗？

https://angular-nufbqg.stackblitz.io

Answer 1

您弄错了，您的代码可以正常工作。

没有类型的button的默认操作是什么？没有！ (click)调用下的方法不是浏览器的默认操作。
您要停止传播吗？ DOM链上方没有单击事件的侦听器，同一元素中有一个处理程序。因此停止传播是没有用的。

您可以根据需要解决问题。说，您必须在单击按钮时提交一个表单。然后，submit按钮类型的默认操作是提交表单。 preventDefault()将在那里工作。

<form (ngSubmit)="doSomething()">
  <button type="submit" appDirective>Click Me</button>
</form>


export class AppDirective {
  @HostListener('click', ['$event']) onClick($event: Event) {
    console.log("host listener called"); // will be called
    $event.preventDefault();
  }
}


doSomething() {
   console.log("do Something called");   // won't be called
}

https://stackblitz.com/edit/angular-kdajrk

Answer 2

export class AppDirective {
 @HostListener('mousedown', ['$event']) onClick(evt: Event): boolean {
  evt.preventDefault();
  evt.stopPropagation();
  alert('i tried to prevent this...');
  return false;
 }
}

您必须返回false

Answer 3

我接受Ashish的答案是因为我在技术上做错了什么，但是现在我只是要禁用该指令要获得我想要的功能的元素上的指针事件（实际上并不需要解决方法就像提交表单一样。

停止点击不起作用的指令Angular 2

3 个答案: