Child кнопки не дает вызвать onclick, как исправить?

Question

[Mcrx]

Добавляю так иконку

button.innerHTML = '<i class="fa fa-pencil"></i>';
    button.onclick = function (e) {
      if (this === e.target) {
        var id = e.target.parentNode.parentNode.id;

        console.log(id);
      }
    }

пока спасаюсь такой костыльной проверкой,
нажимаю по кнопке и в ивент попадает иконка, как сделать чтоб можно было нажимать по всей кнопке и при этом не трогать иконку?

Comments

[Stalker_RED]

А чем мешает иконка?

[Mcrx]

Stalker_RED, я когда по кнопке нажимаю курсором попадаю на иконку и в ивент попадает сама иконка, а мне нужен parentNode.id отталкиваясь от кнопки, собственно если я буду отталкиваться от иконки там вложенность уже больше на один элемент

[Stalker_RED]

Mcrx, покажите разметку

Answer 1

[Stalker_RED]

<button id="foo">
  some text <i>[icon]</i>
</button>

$('button').on('click', function (e) {
  console.log(this); // элемент, на который был навешен обработчик
  console.log(e.currentTarget); // элемент, на который был навешен обработчик
  console.log(e.target); // элемент, по которому кликнули
  console.log(e.target.closest('button').id); // id
  console.log(e.currentTarget.id); // id
  console.log(e.currentTarget.closest('button').id); // id
  console.log(this.id); // id
})

Answer 2

[Nikita Velko]

Просто исправьте target на currentTarget.
e.currentTarget.parentNode.id
Пример.