Как получить выбранный элемент только в stencilJS, когда для тени установлено значение true - PullRequest
Новая
       24

Как получить выбранный элемент только в stencilJS, когда для тени установлено значение true

0 голосов
/ 19 ноября 2018

У меня проблема с тем, что, когда я устанавливаю тень как истинную в моем компоненте, я получаю целую dom, когда щелкает любое изображение (и другой элемент) вместо элемента, который щелкает.

Как я могу решить эту проблему.

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 06 марта 2019

Вот ответ: 

 @Listen('click')
  onHadnleClickEvent(ev) {
    // It will give you the clicked element (composedPath()[0])
    console.log('===== 31 =====', ev.composedPath()[0]);
  }
0 голосов
/ 23 ноября 2018

Вы можете использовать свойство 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) напечатает элемент изображения, который был нажат на консоли.

...