react Клик не работает на SVG // javascript onClick target dataset
Primary tabs
Например для подобного элемента:
function DelIcon(props) { return ( <SvgIcon {...props} width="16" height="16" viewBox={'0 0 16 16'}> <path d="M16 .885L15.115 0 8 7.115.885 0 0 .885 7.115 8 0 15.115.885 16 8 8.885 15.115 16l.885-.885L8.885 8 16 .885z" fill="#FFFFFF"></path> </SvgIcon> ); } return ( <Link className={'delitem'} onClick={props.removeItemCallback} name={props.name} data-array-index={index} > <DelIcon/> </Link> );
ПРИЧИНА
оказалось, что проблема была в том, что в target события попадет в точности тот элемент, по которому был произведен клик, поэтому любой доп. элемент html внутри тэга а, будет приводить к дому что data-атрибуты a перестанут оказываться в event-е (не только svg)
РЕШЕНИЕ
В качестве решения можно использовать CSS свойство для выключения действия событий курсора на элемент, напр. для svg (поможет для кода выше):
svg { pointer-events: none; }
- Log in to post comments
- 1125 reads