ourstytems Child Container onClick event trigger the parent Container onClick event

Hi,

In a Mobile application Screen I have a Parent Container & Child Container under it.

For both Container I added the onClick Event, The problem is when I click on Child Container it also trigger the Parent Container Click.

Any Help ? 

Thanks in Advance


Hi Assif,

Can you use "event.stopPropagation()", you need to put this code in the child element, so this function will stop triggering the parent event.

ex:

Javascript:

$("span").click(function(event){
        event.stopPropagation();
        alert("The span element was clicked.");
    });

$("p").click(function(event){
        alert("The p element was clicked.");
    });

HTML:

<p>This is a p element, in the div element. <br>

     <span style="background-color:orange">This is a span element in the p and the div element.</span>

</p>


Without stopPropagation, both alter will work, if you include this function only span click only work.


Can you try this, Hope this helps


Thanks,

Balu

The help is, that is designed behaviour by the javascript-engine.

It bubbles events...

if you don't want to propogate such events, you have to stop it ..

https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute#387843

Hi assif_tiger,

You may need to read up on Javascript event bubbling and capturing.

In general, you can call event.stopPropagation() from within your child container's event handler to stop events from bubbling up to the parent container's event handlers.

I have a similar problem, but in my case the parent's handler is called before the child's handler. How can I reverse the order in which the events are triggered?

Hi Daniel,

This is default javascript behaviour. I don't think you will be able to reverse the order. But you can manage that logically.

In child onclick event you can run the parent onclick logic first and then set some flag so that on subsequest call of parent onclick you can skip logic and reset the flag. This when when you will click on parent container your logic will execute as it is but if you click on child first parent logic will be executed then child.

Hi Nikhil,

I thought to understand that he experience outside to inside event handlers to be fired. That is called event capturing.

I think default behaviour is event bubbling from inside  to outside.

You can reverse this from outside to inside using event capturing.

To turn this on, pass true as the 3rd argument to the a JavaScript addEventListener method.

Element.addEventListener("click", function(){}, true);

Instead of working from inner to outer it flips the direction and goes from outer to inner.

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Nikhil,

I thought to understand that he experience outside to inside event handlers to be fired. That is called event capturing.

I think default behaviour is event bubbling from inside  to outside.

You can reverse this from outside to inside using event capturing.

To turn this on, pass true as the 3rd argument to the a JavaScript addEventListener method.

Element.addEventListener("click", function(){}, true);

Instead of working from inner to outer it flips the direction and goes from outer to inner.

Regards,

Daniel


Yes, I was indeed experiencing outside to inside event handlers.

I was using a ListItem with a link to an action (ParentAction) using the prebuilt OutSystems "link" functionality. Inside the list element, I had a container with an onclick event to another action (ChildAction). In this scenario, the ParentAction was being fired before the ChildAction. I fixed it by also using the prebuilt link on the child. Now, only the child event is fired which is exactly what I wanted.

Thanks to both of you for your insights,

Daniel

Daniël Kuhlmann wrote:

Hi Nikhil,

I thought to understand that he experience outside to inside event handlers to be fired. That is called event capturing.

I think default behaviour is event bubbling from inside  to outside.

You can reverse this from outside to inside using event capturing.

To turn this on, pass true as the 3rd argument to the a JavaScript addEventListener method.

Element.addEventListener("click", function(){}, true);

Instead of working from inner to outer it flips the direction and goes from outer to inner.

Regards,

Daniel

Hi Daniel,

Yes, you are right event capeturing can be the solution for him.

But we can not use onclick event of the container in that case and have to us JS block to add event listener. Correct me if I am wrong as I have never tried this in OS.