Как вернуть свойства из указанного c HTML узла из пути события - PullRequest
Новая
       3

Как вернуть свойства из указанного c HTML узла из пути события

1 голос
/ 20 января 2020

У меня есть кнопка с изображением и текстом внутри следующим образом: 

<button on-tap="doSomething">
  <img src="./path/to/img.png">
  <p>Text<p>
</button>

И я бы хотел передать текст кнопки в фильтр 

function doSomething(e) {
  console.log(e.path[0].innerText);
}

Однако, путь меняется в зависимости от того, где нажата кнопка. Если вместо щелчка на кнопке щелкнуть изображение, соответствующий текст будет расположен по адресу e.path[0].innerText.

. Я думаю, что смогу пройти по пути oop и вернуться, как только будет найдена первая кнопка, но Я не уверен, как сопоставить имя селектора. 

function doSomething(e) {
  e.path.forEach(el => {
    if (el.name === 'button') console.log(el.innerText);
  }
}

Или я мог бы привязать данные и к изображению, и к кнопке, но это кажется неправильным подходом.

Как я могу выберите кнопку из пути и получите ее innerText?

1 Ответ

2 голосов
/ 20 января 2020

Вы можете попытаться использовать свойство tagName с элементом target: 

function doSomething(e) {
  if (e.target.tagName === 'BUTTON') {
    console.log(e.target.innerText);
  }
}
<button onclick="doSomething(event)">
  <img src="./path/to/img.png">
  <p>Text<p>
</button>

Или: 

var button = document.querySelector('button');
button.addEventListener('click', function (e) {
  if (e.target.tagName === 'BUTTON') {
    console.log(this.innerText);
  }
});
<button>
  <img src="./path/to/img.png">
  <p>Text<p>
</button>
...