How can I prevent OnMouseDown event of parent control.

[abhimanyu]

Hi,

Panel and control over the panel, both having a OnMouseDown event. When click on panel it works fine but when click on control which is over the panel then it calling two events firstly control's mousedown and then panel's mousedown so I want only one event has to be called. If click on control it should be call control's mousedown not panel's mousedown. 

How  did I prevent parent's mousdown event?

[mhmda]

Here: https://javascript.info/tutorial/bubbling-and-capturing

event.stopPropagation();

[Sherzod]

Hi,

 

Are you using mousedown fn in delphi code?!

[Sherzod]

Can you try this approach for now?!:

 

Your Panel -> ClientEvents -> ExtEvents -> function boxready:

function boxready(sender, width, height, eOpts)
{
    sender.items.each(function(el) {
        var me=Ext.get(el.id);
        if (me) {
            me.dom.addEventListener('mousedown', function(e) {
                e.stopPropagation();
            })
        }
    })
}

Try..

 

Best regards.

[abhimanyu]

Can you try this approach for now?!:

 

Your Panel -> ClientEvents -> ExtEvents -> function boxready:

function boxready(sender, width, height, eOpts)
{
    sender.items.each(function(el) {
        var me=Ext.get(el.id);
        if (me) {
            me.dom.addEventListener('mousedown', function(e) {
                e.stopPropagation();
            })
        }
    })
}

Try..

 

Best regards.

 

due to this the child control's popup are occurring but when I click on parent then it also not showing parent's popup. It have to show parent's popup when click on parent and child's popup when click on child control

[Sherzod]

Hi,

 

Sorry, The above code works for you ?!

[abhimanyu]

Hi,

It is blocked parent's event. It will never called, It have to be called when actually click on parent.

[Sherzod]

Hi,

 

It is blocked parent's event.

 

Correct

 

 

It will never called, It have to be called when actually click on parent.

 

I couldn't reproduce, pls can you make small test case for this?!

[abhimanyu]

Please see the attached demo.

first edit box  showing right popup which it's own popup.

 

I want second edit box and grid need to call parent popup.

Project_preventParentEvent.zip

[Sherzod]

Hi,

 

I want second edit box and grid need to call parent popup.

 

then can you try this approach for now?!:

function boxready(sender, width, height, eOpts) {
    sender.items.each(function(el) {
        Ext.defer(function() {
            var me = Ext.get(el.id);
            var mousedownEvents = el.hasListener('mousedown');

            if (me && mousedownEvents) {
                me.dom.addEventListener('mousedown', function(e) {
                    e.stopPropagation();
                })
            }
        }, 50);
    })
}

Best regards.

[abhimanyu]

Thanks Delphi Developer!

 

your solution is working fine but if there is multiple panel below that control then it will not working. Please see the attached demo.

Project_preventParentEvent.zip

[Sherzod]

Hi,

 

OK, I think you need a another approach

Later I will try to give you a solution...

 

Best regards.

[Sherzod]

Hi,

 

You can use a recursive traversal in the above code I guess

But what if you will use this solution to your needed controls?!:

 

For example for UniDBEdit1:

 

UniDBEdit1 -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    sender.getEl().dom.addEventListener('mousedown', function(e) {
        e.stopPropagation();
    })
}

Best regards.

[mazluta]

Hi Sherzod

where can i find documentation about 

sender.getEl().dom.addEventListener('mousedown', function(e) {
        e.stopPropagation();
    })

what is sender - the object owen the evennts? how can i use it inside ext evenet - like mouse down.

what is geEL()

is dom is not the ALL "page document"

where the "e" came from ?

addEventListener - where can i find list of all the functions?

i treid stop the mousedown event of UniPDFFrame - no success

[Point]

Hello,

in unimDBListGrid :

Sample Code On Server Side :


procedure TMainmForm.unimDBListGrid1Click(Sender: TObject);
begin
   unimMemo1.Lines.Add('on Click');
end;

procedure TMainmForm.unimDBListGrid1Disclose(Sender: TObject);
begin
   unimMemo1.Lines.Add('on Disclose');
end;


Sample Code On Client Side :

function childtap(sender, location, eOpts)
{
   console.log('On Tap');
}

function disclose(list, record, target, index, event, eOpts)
{
   //event.stopEvent();
   //event.stopPropagation();
   
   console.log('On Disclose');
}

function initialize(sender, eOpts)
{
    sender.items.each(function(el) {
        var me=Ext.get(el.id);
        if (me) {
            me.dom.addEventListener('childtap', function(e) {
                e.stopPropagation();
            })
        }
    })
   
   //sender.getEl().dom.addEventListener('childtap', function(e) {
   //     e.stopPropagation();
   // })
}

On ChildTap still execute when click/tap disclosure. How to workaround ?

build: 1555

Thanks in advance.

[Sherzod]

Hello,

I will check.

[Sherzod]

2 hours ago, Point said:

On ChildTap still execute when click/tap disclosure. How to workaround ?

Perhaps this is the correct behavior.

But there is a workaround.