如何停止双击事件的传播

Question

考虑这个组件：

<Card onClick={openWindowHandler}>
  <Editable onDoubleClick={enableInputHandler} />
</Card>

我想要实现的是仅onDoubleClick在调度事件时停止事件传播，因此openWindowHandler不会调用该函数。不过，onClick先火再说onDoubleClick！

我可以通过应用函数来区分调用的是哪种事件类型_.debounce，但此时事件已经被调度，因此无法调用stopPropagation().

<Card onClick={openWindowHandler}>
  <Editable onDoubleClick={enableInputHandler} />
</Card>

有什么办法可以做到吗？

编辑： 对元素的单击<Editable />应该冒泡给父母，从而引起openWindowHandler呼叫。

Answer 1

例子：

// This will return a event
function clickHandlerModule() {
    var clickCount = 0;
    var timer = null;
    var delay = 250;
    return function(event) {
        clickCount++;
        if(clickCount === 1){
            timer = setTimeout(function(){
                console.log('SINGLE CLICK');
                clickCount = 0;
            }, delay);
        } else {
            clearTimeout(timer);
            console.log('DOUBLE CLICK');
            clickCount = 0;
        }
    }
}


class App extends React.Component {
  constructor() {
    super();
    this.clickHandler = clickHandlerModule()
  }
  render () {
    return (
      <Card onClick={this.clickHandler}>
        <Editable />
      </Card>
    )
  }
}