Как в обработчике события получить элемент, к которому он привязан?

Question

[IvanIvanIvanIvanIvan]

<div onClick={this.props.page} id="1" style={this.state.numeral}><p>1</p></div>

Как сделать, чтобы онклик работал только с элементом div, и ему никак не мешал внутренний элемент p?
При наведении на div, выскакивает значок текста, и чтобы на див попасть, надо в самый угол нажимать.

Comments

[Ярослав Иванов]

В 2к18 использовать onclick

[IvanIvanIvanIvanIvan]

А что надо использовать?

Answer 1

[Антон Спирин]

Используйте e.currentTarget, этот ключ объекта SyntheticEvent всегда будет указывать на элемент на котором слушается событие:

class Example extends React.Component {
  handleClick = e => {
    alert(`
      target: ${e.target.tagName}
      currentTarget: ${e.currentTarget.tagName}
      `);
  };
  
  render() {
    return <button onClick={this.handleClick}><p>click me</p></button>;
  }
}

Демо: https://jsfiddle.net/ns0jutqe/

Comments

[Rosscian]

А при чем здесь jq и html, если приведен jsx? А автору вопроса, действительно, надо почитать про event target/currentTarget и в целом про всплытие и перехват событий

[Антон Спирин]

Rosscian, хааа! Мне стоит быть внимательней. А автору стоит теги к вопросу правильные ставить. Обновил ответ.

[IvanIvanIvanIvanIvan]

А зачем использовать jquery, чем чистый js плох?

[Антон Спирин]

IvanIvanIvanIvanIvan, я вам по jQuery в первый раз ответил, так как думал, что вопрос по html, а не по JSX. Вам стоило поставить тег React. С React JQuery использовать не надо.

Касательно использования jQuery в маленьких проектах, он лаконичней, лучше масштабируется, на нем реально быстрей писать и не надо иметь вагон функций хелперов. То же делегирование на jQuery пишется в пару строк.
Я не знаю ни одного аргумента его не использовать и кучу, чтобы использовать.
С появлением ES6 многие люди стали популяризировать VanillaJS подход, но большинство команд, кто его использовал хлебнули трудностей по полной, и многие проекты уже давно переписали с использованием фреймворков, а проекты поменьше с тем же jQuery.

Для лендинга, может сойдет и нативный js. Но тот же bootstrap, например, имеет jQuery в зависимостях.

[IvanIvanIvanIvanIvan]

Мне преподаватель на курсах сказал что jQuery устарел, его использовать не надо.
Дурной тон подключать огромную библиотеку неведомо зачем
А по поводу бутсрап хотел спросить, смотрите есть flexbox. Я на нем пробовал верстать, очень удобно в плане адаптивности. Зачем мне бутсрап? Это просто вопросы, я не настаиваю

[IvanIvanIvanIvanIvan]

Не кажется вам, что подключение кучи всяких библиотек только запутывает понимание кода. Я только начинаю, и мне пока так кажется

[IvanIvanIvanIvanIvan]

Когда еще до флексов не дошел, казалось ДА. С этой адаптивностью, построению сайта. Хотелось бы какой то каркас. Но потом когда во флексах разобрался, вообще песня. Ну то есть на простом каком то проекте, достаточно чистого js. А когда пошла какая та дичь, то тут jQuery тоже не надо, просто пишешь Reactjs код