Mousedown and doubleclick event

[bforbhavin]

I need to add mousedown and dblclick events to my panel. But when I double click on the panel, it always calls mousedown event.

var panel = Ext.create('Ext.panel.Panel', {
html: 'Click me twice',
renderTo: Ext.getBody(),
width: 100,
height: 100,
title: 'test panel',
listeners: {
el: {
dblclick: function(e) {
alert('Double click event');
},
mousedown: function(e) {
alert('mousedown');
}
}
}
});

[slemmon]

I'm afraid that's the nature of those events. A doubleclick will initially also fire off a mousedown event.

[bforbhavin]

Any example on sencha website that can handle this situation?

[slemmon]

No. But, there's not really a way to handle the situation. You can't listen for mousedown and doubleclick and not have mousedown events fire on doubleclick.

[bforbhavin]

I register events following way and it (mousedown and dblclick both) works fine when I am working on screen. But when I am working on popup window, dblclick doesn't get fired. If I defer mousedown event for few milliseconds then dblclick is fired. Also, it is not working only in Chrome, but works fine with IE and FireFox. Any idea about this behavior? Is it a DOM issue specifically for Windows panel for registering double click event? How to debug this issue and find out whether it's a browser specific issue?

this.mappanel.el.on({
mousemove: me.getMouse,
mousedown: me.mapTool,
mouseup: me.chkMouseUp,
dblclick: me.finishPolyline,
mousewheel: me.wheel,
contextmenu: me.handleRightClick,
scope: me
});

[ettavolt]

You may do something with mousedown event or return something unsuitable from it's handler, that prevents other events from firing.

[bforbhavin]

What I am not understanding is - same events ( mousedown and dblclick) work on screen but doesn't work on the popup window. How to find cause of it? Also, only it doesn't work in Chrome but works in firefox and IE.

[ettavolt]

Try tracing into your mousedown, mouseup handlers.

[bforbhavin]

Ok, here is my findings further. I have setup events following way. Now, due to one action there is one third party javascript code which is adding one div on 'mappanel'. It looks, for some reason, the events get associated with that child div and no effect of mouse events when I perform actions on mappanel. Do I need to associate events with mappanel again after the div is added dynamically on it?

me.mappanel.el.on({
mousemove: me.getMouse,
mousedown: me.mapTool,
mouseup: me.chkMouseUp,
dblclick: me.finishPolyline,
mousewheel: me.wheel,
contextmenu: me.handleRightClick,
scope: me
});

[ettavolt]

The browser may decide to stop events firing if dom structure has changed. Especially, if something dis-/appears under cursor.