javascript - Why is a click on a nested element not bubbling up to it's parent with the click binding? -

i have html:

<a href="#" class="action" data-action="foo">   <h1>some</h1>   <p>text<p> </a> 

and binding:

$(document).on("click", ".action", function (e) {   var = e.target.getattribute("data-action");   if (do === undefined || === null) {     console.log("error");   } }); 

strangely if click on h1 or p, error logs, while expecting click bubble link element.

question:
normal behaviour if elements nested inside element click handler clicked? why click not bubbling up?

thanks!

strangely if click on h1 or p, error logs, while expecting click bubble link element.

it (which why jquery called event handler), you're not looking @ element.

the target property of event object element event started (so, h1 or p), not element on you've hooked event, 1 eventhandler running associated with. jquery (and dom2's addeventlistener), element you've hooked event given this (and currenttarget on event object).

so if change e.target this, you'll behavior expect.

---

side note: do reserved word in javascript, can't use variable name. i'm surprised code doesn't fail error effect.