events - 禁用子事件

Question

我使用 Ext JS 4。我在容器中有一个按钮。我希望容器接收 mouseover、mouseout 和 click 事件，但是该按钮导致在容器上调用 mouseover 和 mouseout 事件处理程序两次。如何禁用子按钮上的事件？

Answer 1

我相信您正在使用 4.0 的新 bubbleEvents 行为。组件现在将一些事件传播到它们的父容器。这发生在代码中，独立于 DOM 事件冒泡，在组件层次结构中向上。

http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.container.Container.html

最好的解决方法是在处理完事件后简单地停止它。这应该可以防止所有冒泡、组件或 DOM。对单击事件执行此操作通常是一个好主意，以确保响应单击时仅发生一件事，但我不太确定它是否适合鼠标悬停和鼠标悬停。

panel.on('click', function(e) {
    e.stopEvent();
    // do your stuff
});

您可以尝试的另一个修复（我没有）是擦除按钮上的bubbleEvents。

另一个可能不太健壮的修复是打开事件缓冲：

el.on('click', this.onClick, this, {buffer: 10});

缓冲将可配置时间窗口中的重复事件折叠成一个，它对于平滑快速触发或重复 UI 事件很有用，但我不确定它如何处理冒泡。

Answer 2

{
...
preventDefault: true,
...
}