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]);
  }

阴影设置为true时如何仅在stencilJS中获得单击的元素

2 个答案: