禁用 div 中的所有按钮和链接

Question

我正在尝试禁用 div 内的所有点击事件。我禁用了整个 div，但这对我来说不是解决方案，因为我有 mouseEnter 事件需要继续工作。

问题是它是我在应用程序的不同部分使用的指令，所以这个 div 有不同的结构，有时按钮是“直接子”，有时它在第二级。

这是我的尝试，它有效，但我发现它“脏”：

<div #mydirective>
  <button (click)="function1()">button</button>
  <div>
    <a (click)="function2()">link</a>
  </div>
</div>

//directive ts
var children = this.element.nativeElement.children;
for (let child of children) {
  this.renderer.setAttribute(child, 'disabled', 'true'); //for button
  this.renderer.addClass(child, 'disabled'); //for links
  var grandchildren = child.children;
  for (let grandchild of grandchildren) {         
    this.renderer.setAttribute(grandchild, 'disabled', 'true');
    this.renderer.addClass(grandchild, 'disabled');
  }
}

我相信它应该更容易，有什么方法可以在我的 div 中找到所有按钮和链接？

Answer 1

如果你想禁用所有鼠标点击..然后有条件地添加一个css类到那个div来禁用所有指针事件。

在 html 文件中。

<div class="your-class">
  // buttons and content goes here.
</div>

在 css/scss 文件中。

.your-class {
  pointer-events: none;
}