如何停止双击事件的传播答案

【问题标题】：How to stop Propagation on Double Click event如何停止双击事件的传播
【发布时间】：2017-08-23 03:54:24
【问题描述】：

考虑这个组件：

<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 /> 元素的单击应向父母发出气泡，从而导致openWindowHandler 调用。

【问题讨论】：

您遇到了人体工程学问题：您的卡上应该有一个 onLongClick 道具。用户不会被您的单击或双击弄乱。
卡不是这里的问题。它可以是任何其他组件。问题是在另一个带有 onClick 事件的组件中带有 onDoubleClick 的 havig 组件。应该能够以某种方式停止将事件传播给它的父母。
add on editable : onClick={(e) => {e.stopPropagation()}}，有可能会影响onDoubleClick，但试试看:)。
我不能:(单击应该传播到它的父级，只有双击应该抑制传播。

标签： javascript reactjs events event-handling dom-events

【解决方案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>
    )
  }
}

【讨论】：

【解决方案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>

因此您可以在 cart.component 中为 click && dblClick 事件编写一些方法并使用 dblclick em> 对于 editable.component 没有冲突

附：是的，我使用的是角度，对不起语法:)

【讨论】：