shadow-dom - 当阴影设置为 true 时，如何仅在 stencilJS 中获取被点击的元素

Question

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

我该如何解决这个问题。

提前致谢

Answer 1

这是答案：

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

Answer 2

您可以使用传递给事件处理程序的事件参数对象的 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 函数）会将被单击的图像元素打印到控制台。