时间戳

首页 > 解决方案 > 离子查找是否通过父母点击事件点击了孩子

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

问题描述

我有一个带有标签的复选框，即使单击标签，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

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

标签： javascriptangularionic-frameworkionic3dom-events

解决方案

在您的示例链接中，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 === 'A')为if ((e.target as HTMLElement).tagName === 'BUTTON')得到你想要的。

更新

下面的元素覆盖了您的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所说。这种方式为您提供更优雅的代码，但让您编写更多样式代码。

推荐阅读