Javascript 如何停止双击事件的传播

考虑这一部分：

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

有什么办法吗

编辑： 单击

元素应向父级冒泡，从而导致调用

openWindowHandler

。

示例：

// 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>
    )
  }
}

//这将返回一个事件
函数clickHandlerModule（）{
var-clickCount=0；
var定时器=null；
无功延迟=250；
返回函数（事件）{
点击计数++；
如果（单击计数===1）{
计时器=设置超时（函数（）{
console.log（'singleclick'）；
点击计数=0；
}，延误）；
}否则{
清除超时（计时器）；
console.log（“双击”）；
点击计数=0；
}
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.clickHandler=clickHandlerModule（）
}
渲染（）{
返回(
)
}
}

HTML

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

因此，您可以为购物车组件中的单击和&dblClick事件编写一些方法，并对可编辑组件使用dblClick，而不存在冲突

---

另外，是的，我使用的是角度，抱歉语法：）

你有一个人体工程学问题：你的卡上应该有一个长点击道具。用户不会因为您的单击或双击而感到混乱。这里的问题不是卡。它可以是任何其他组件。问题是，在另一个组件中有onDoubleClick组件和onClick事件。应该能够以某种方式停止将事件传播到其父级。加载项可编辑：onClick={（e）=>{e.stopPropagation（）}，它可能会影响onDoubleClick，但请尝试：）。我不能：（单次单击应该传播到其父级，只有双击应该抑制传播。

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