javascript - 如何停止双击事件的传播

Question

考虑这个组件:

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

我想要实现的是停止事件传播，仅当onDoubleClick 时。事件被调度，所以 openWindowHandler不调用函数。然而，onClick将在 onDoubleClick 之前触发!

我可以通过应用 _.debounce 来区分调用了哪种事件类型函数，但到那时，事件已经被调度，所以没有办法调用 stopPropagation() .

class App extends React.Component {
  delayedCallback = _.debounce(function (event) {
    if (event.type === 'dblclick') {
      // too late to call event.stopPropagation()
    } else {
      // continue
    }
  }, 250)

  handleClick = (event) => {
    event.persist()
    this.delayedCallback(event)
  }

  render () {
    return (
      <Card onClick={this.handleClick}>
        <Editable onDoubleClick={this.handleClick} />
      </Card>
    )
  }
}

有什么办法吗？

编辑:单击 <Editable />元素应该冒泡给 parent 导致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>
    )
  }
}