当shadow设置为true时，如何仅在stencilJS中获取单击元素

Question

我遇到了一个问题，当我在我的组件中将阴影设置为true时，当任何图像（其他元素）点击而不是单击的元素时，我会得到整个dom。

我该如何解决这个问题。

提前致谢

Answer 1

您可以使用事件参数对象的currentTarget属性，该属性传递给事件处理程序以获取被单击的元素。例如，查看以下代码：

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() first: string;
  @Prop() middle: string;
  @Prop() last: string;

  constructor() {
    this.imgClicked = this.imgClicked.bind(this);
  }

  format(): string {
    return (
      (this.first || '') +
      (this.middle ? ` ${this.middle}` : '') +
      (this.last ? ` ${this.last}` : '')
    );
  }

  imgClicked(evt) {
    console.log(evt.currentTarget);
  }

  render() {
    return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
  }
}

在代码中，onClick处理程序（即imgClicked函数）将打印单击到控制台的图像元素。

Answer 2

这是答案：

 @Listen('click')
  onHadnleClickEvent(ev) {
    // It will give you the clicked element (composedPath()[0])
    console.log('===== 31 =====', ev.composedPath()[0]);
  }