Почему onClick распространяется на дочерний элемент?

Question

[Jedi]

Здравствуйте! Странное кое что...

<li className="mdc-list-item" tabIndex="0" key={i} data-user-id={user.id} onClick={this.startChat}>
     <span className="mdc-list-item__text">{user.name} {user.surname}</span>
</li>

startChat(event) {
     console.log(event.target.getAttribute('data-user-id'))
}

this.startChat = this.startChat.bind(this);



Когда кликаю по краям, соответсвенно, это li элемент, получаю ожидаемое. Но при клике по центру, где живет span, получаю null.

Answer 1

[alex4answ]

Потому что событие всплывает

Comments

[Jedi]

Спасибо большое! Не знал об этом.