How to stop distribution during a Double Click event

Question

Consider this component:

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

I want to achieve to stop event propagation only when the onDoubleClick event is dispatched, so the openWindowHandler function is not called. However, onClick will fire before onDoubleClick!

I can tell which type of event is being fired using the _.debounce function, but by this time the event has already been dispatched, so there is no way to call 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>
    )
  }
}

Is there any way to do this?

EDIT: A single click on an item <Editable />should be flagged by the parents calling 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>
    )
  }
}

Answer 2

export class Sample {
   clickCount = 0;

   onItemClick() {
        let isDoubleClick = false;
        this.clickCount++;
        if (this.clickCount === 1) {
            setTimeout(() => {
               if (this.clickCount > 1) {
                isDoubleClick = true;
                console.log('dblclick');
               }
               this.clickCount = 0;
               if (!isDoubleClick) {
                console.log('click');
               }
           }, 250);
        }
    }
  } 
}

HTML

  <Card (click)="onItemClick()">
    <Editable (dblclick)="SomeMethodForDblClick()" />
  </Card>

, click && dblClick cart.component dblclick editable.component

PS , , :)