Событие React OnMouseDown не работает, тогда как OnMouseUp работает нормально (для элементов SVG). - PullRequest
Новая
       85

Событие React OnMouseDown не работает, тогда как OnMouseUp работает нормально (для элементов SVG).

0 голосов
/ 12 декабря 2018

У меня есть элемент svg, на котором мне нужно захватить событие mousedown.Вот код. 

//code snippet...
<g onMouseDown={this.clickHandler}>
    <circle ...></circle>
    <text> </text>
</g>

Код для обработчика щелчков очень прост. 

clickHandler() {
    alert("mouse down")
 }

onMouseUp и OnClick работают нормально, но не onMouseDown

То же самое событие onMouseDown при работе вне SVG (я попробовал Button)

Любая идея об ошибке.

React Version: 16.5.2

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

OnMouseDown получит блок, если у вас также реализована функция перетаскивания.

Для захвата OnMouseDown вам необходимо удалить event.stopPropogation() из вашего dragStartEvent

Еще одна интересная вещь: если вы не хотите удалять event.stopPropogation(), вы все равно можете выполнить всю операцию, которую вы намереваетесь выполнить с событием OnMouseDown в dragStartEvent.

Надеюсь, это поможет ...

0 голосов
/ 12 декабря 2018 
class Hello extends React.Component {
onDown()
{
console.log("Down");
}
onClick()
{
console.log("Click");
}
  render() {
    return <div>
    <svg >
    <g onClick={this.onClick} onMouseDown={this.onDown} >
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</g>
</svg>
</div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Работает нормально с console.log ссылка

...