Ionic：通过父级点击事件查找子元素是否被点击

Question

Ionic：通过父级点击事件查找子元素是否被点击

javascriptangularionic-frameworkionic3dom-events

3

我有一个带标签的复选框，当单击标签时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。编辑：如果没有说明清楚，我只需要在链接被点击时显示警报。当单击标签的其他部分时，警报不应该出现。

- gfels

2个回答

0

使用ViewChild引用ion-label组件。

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

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

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

我正在使用模板引用到ion-checkbox，以便在单击链接时可以切换

  <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

- Chellappan வ

不错，但我需要仅在单击<a>元素时显示警报，而不是单击标签的其他部分。 - gfels

我已经更改了答案，请检查答案！https://stackblitz.com/edit/ionic-tmizxm - Chellappan வ

抱歉，我不太明白您的意思，而且 Stackblitz 没有显示所需的结果。 - gfels

如果您单击链接，您想要检查复选框，我已经更新了答案，请检查一下。如果您单击链接，它将自动选中复选框。 - Chellappan வ

不，我希望只有在链接被点击时才会出现警报。而不是将事件处理程序附加到链接上。通过复选框事件来实现。当链接被点击时，复选框不应该被选中。如果单击标签的任何其他部分（而不是链接），则应该选中复选框。 - gfels

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hyuck Kang · Accepted Answer

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

所以一种方法是在ion-label上添加z-index，并为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')})
}

另一种方法是使用经典的复选框和标签，就像@Duannx所说的那样。这种方式可以给你更优美的代码，但需要你编写更多的样式代码。