ourstytems Child Container onClick event trigger the parent Container onClick event

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.