Disable Events on Child

Im using Ext JS 4. I have a button inside a container. I want the container to receive mouseover开发者_JAVA百科, mouseout, and click events, but the button is causing the mouseover and mouseout event handlers to be called twice on the container. How can i disable the events on the child button?

---

I believe you are running to 4.0's new bubbleEvents behavior. Components now propagate some events to their parent containers. This happens in code, independent of DOM event bubbling, up the component hierarchy.

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

The best fix is to simply stop the event once you've handled it. That should prevent all bubbling, component or DOM. It is generally a good idea to do this for click events to make sure one and only one thing happens in response to a click, but I'm less certain it's appropriate for mouseover and mouseout.

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

another fix you could try (I haven't) is to wipe bubbleEvents on the button.

Another, possibly less robust fix is to turn on event buffering:

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

Buffering collapses duplicate events in a configurable time window into one and it's useful for smoothing out rapid fire or duplicate UI events, but I'm not sure how it plays with bubbling.

---

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