离子查找是否通过父母点击事件点击了孩子

Question

我有一个带有标签的复选框，即使标签被点击，Ionic 也会触发复选框事件。

我将动态 HTML 绑定到这样的标签：

<ion-label [innerHTML]="htmlString"></ion-label>

并且 htmlString 可以包含 <a> 元素。当用户点击这些元素时，必须发生某种动作。我正在尝试在不手动将事件处理程序绑定到 <a> 元素的情况下执行此操作：

checkBoxEvent(e){
     if ((e.target as HTMLElement).tagName === 'A') {
      alert('link found')
    }
  }

但它没有找到链接。有什么建议吗？

这是一个工作/可编辑的示例： https://stackblitz.com/edit/ionic-kdzcwt?file=pages%2Fhome%2Fhome.ts

编辑：抱歉，如果不清楚，但我只需要在单击链接时显示警报。单击标签的其他部分时，不应显示警报。

Answer 1

在您的示例链接中，e 是 undefined，因为您没有将 $event 作为 checkBoxEvent() 函数的参数传递。在html模板文件中，你应该将<ion-checkbox (click)="checkBoxEvent()" ></ion-checkbox>替换为<ion-checkbox (click)="checkBoxEvent($event)" ></ion-checkbox>。

另外，(e.target as HTMLElement).tagName 不是'A' 而是'BUTTON'。我认为这是由ion-checkbox 的实施引起的。所以你也应该用if ((e.target as HTMLElement).tagName === 'BUTTON')替换if ((e.target as HTMLElement).tagName === 'A')来得到你想要的。

---

更新

下面的元素覆盖了你的innerHTML，所以点击事件被拦截了。

<button class="item-cover item-cover-md item-cover-default item-cover-default-md" ...> ...</button>

所以一种方法是将z-index 添加到ion-label 并为a 标签元素添加事件监听器。但是如果你想让复选框正常工作，你应该添加比下面更多的代码。

.html

<ion-label style="z-index:100;" #ref ></ion-label>
<ion-checkbox></ion-checkbox>

.ts

@ViewChild('ref') ref: ElementRef;
ngAfterViewInit() {
    this.ref.nativeElement.innerHTML = "This is a test label to test <a>link</a> click events";
    this.render.listen(this.ref.nativeElement.getElementsByTagName('a')[0],'click',()=>{alert('link found')})
}

另一种方式是使用经典的checkbox和label，正如@Duannx所说。这种方式给你更优雅的代码，但让你编写更多的样式代码。

Answer 2

使用 ViewChild 引用 ion-label 组件

 <ion-label #ref ></ion-label>

如果你想在链接前和链接后添加动态数据，你需要像这样使用三个元素

  <span #ref></span>
  <a #anchor (click)="onClick()" ></a>
  <span #las></span>

我正在使用模板引用到离子复选框，以便在单击链接时可以切换

  <ion-checkbox  #checkbox> </ion-checkbox>

component.ts

  onClick(){
         this.checkbox.checked=!this.checkbox.checked;
  }
  ngAfterViewInit(){
          this.ref.nativeElement.innerHTML=`This is a test label to test`;
          this.anchor.nativeElement.innerHTML=`link`;
          this.las.nativeElement.innerHTML=`click events`;
  }    

例如：https://stackblitz.com/edit/ionic-tmizxm