React: onClick - получить только выбранный элемент, а не дочерние элементы
У меня есть кнопка, внутри которой находится отличный шрифт svg. Слушатель находится только на кнопке, а не на svg. Хотя, когда я нажимаю на svg, event.target не является кнопкой.
Но мне нужна только кнопка в качестве цели.
Вот код:
const icon = '<svg aria-hidden = "true" data-prefix = "fas" data-icon = "paragraph" class = "svg-inline--fa fa-paragraph fa-w-14 " role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 448 512"><path fill = "currentColor" d = "M408 32H177.531C88.948 32 16.045 103.335 16 191.918 15.956 280.321 87.607 352 176 352v104c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h32v344c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h40c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24z"></path></svg>';
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick(event) {
event.stopPropagation();
console.info(event.target);
}
render() {
return (
<div>
<button onClick = {this.handleClick}>
<span dangerouslySetInnerHTML = {{__html: icon}} />
</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Я написал маленькой ручкой: https://codepen.io/DaFunkyAlex/pen/aRvVjd
Да это ... извините
Возможный дубликат Можете ли вы настроить таргетинг на родительский элемент elements с помощью event.target?
Вы также можете легко проверить, есть ли e.target === e.currentTarget. e.target сообщает вашему фактическому нажатому элементу, где e.currentTarget является родительским элементом с прослушивателем щелчков.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы должны использовать: event.currentTarget, который всегда является объектом, ожидающим события.
event.target - это реальная цель, получившая щелчок.
Facepalm ... это абсолютно верно. Спасибо
Это можно сделать разными способами. Я предпочитаю делать это с помощью CSS, применяя указатель-события: нет к дочерним охватывать.
Кодовое отверстие: https://codepen.io/imsontosh/pen/mzeqNx
button {
background: #eee;
border: 1px solid #ddd;
width: 150px;
span{
pointer-events:none;
}
}
Возможный дубликат этого вопроса: stackoverflow.com/questions/29168719/…