可拖动的 Konva 阶段的对象中缺少单击事件答案

【问题标题】：click event missing in objects of a draggable Konva stage可拖动的 Konva 阶段的对象中缺少单击事件
【发布时间】：2017-10-02 03:44:23
【问题描述】：

我在用react-konva，发现Stage的可拖动属性为true时onClick事件不会触发。

import React from 'react'
import ReactDOM from 'react-dom'
import Konva from 'konva'
import { Layer, Rect, Stage } from 'react-konva'
import './App.css'

class App extends React.Component {
  render() {
    return (
      <div ref='container'>
        <Stage width={700} height={700} draggable={true} >
          <Layer>
            <Rect
              x={100}
              y={100}
              width={200}
              height={100}
              stroke={'red'}
              onClick={() => { console.log('Click on Rect') }}
            />
          </Layer>
        </Stage>
      </div>
    )
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

“单击矩形”消息未出现在控制台中（使用 Chrome 61.0.3163.100）。如果您在舞台上设置 draggable={false}，则会显示该消息。这是 react-konva 的已知限制吗？有解决方法吗？这似乎也发生在 Group 身上......

【问题讨论】：

你能提供一个演示吗？这个工作正常：jsbin.com/mebuviduje/1/edit?js,output
其实这个演示对我也不起作用......点击矩形不会改变它的颜色，除非我从组中删除可拖动......但它适用于 MS Edge。这可能是 Chrome 的错误吗？？？
这个呢：jsbin.com/qisaverubo/2/edit?html,js,output（更改konva版本）
是的，这个确实有效。我正在使用来自 npm 的 konva 1.6.8，这似乎是最新的。
这可能是拖动距离问题吗？也许 dragDistance 设置为零？

标签： reactjs konvajs

【解决方案1】：

确实，只要我将 dragDistance 设置为 >0，问题就会消失。感谢您的建议！

【讨论】：

很高兴能帮上忙。