javascript - Use onclick event in parent or child element? -

a little story situation: colleague monitors ga stuff tells me isn't firing when trying track how many clicking on what, on our website. don't have access google account check if changes working or not , she's sick (and no company doesn't want ga accounts being shared whatever reason)

so thought i'd come here , ask while wait. ga set this, , wanted know if matters onclick is? should in anchor tag in situation? or leaving in div okay?

html:

<table>   <tr>      <td><div onclick="ga('send', 'event', 'participant_centre', 'click', 'pledgesheet');"><a href="this_tool" target="_blank">pledge sheet</a></div></td>       <td><div onclick="ga('send', 'event', 'participant_centre', 'click', 'stepbystepguide');"><a href="this_tool" target="_blank">step step guide</a></div></td>    </tr>   <tr>     <td><div onclick="ga('send', 'event', 'participant_centre', 'click', 'samplebudget');"><a href="this_tool" target="_blank">sample budget</a></div></td>     <td><div onclick="ga('send', 'event', 'participant_centre', 'click', 'lawnsign');"><a href="this_tool" target="_blank">lawn sign</a></div></td>   </tr>   <tr>     <td><div onclick="ga('send', 'event', 'participant_centre', 'click', 'eventplanningchart');"><a href="hthis_tool" target="_blank">event planning chart</a></div></td>     <td><div onclick="ga('send', 'event', 'click', 'participantcentre', 'fundraisingthermometer');"><a href="hthis_tool" target="_blank">fundraising thermometer</a></div></td>   </tr> </table> 

i don't know made or set way looks wrong me, because don't put divs inside td because of layout problems.

what changed this:

html:

<div class="container">    <div class="col-lg-12">       <div class="col-md-3">         <a href="this_tool" target="_blank" onclick="ga('send', 'event', 'participant_centre', 'click', 'pledgesheet');">pledge sheet</a>       </div>       <div class="col-md-3">         <a href="this_tool" target="_blank" onclick="ga('send', 'event', 'participant_centre', 'click', 'stepbystepguide');">step step guide</a>           </div> [...] 

is better set up? why wasn't firing? ga code correct used before other pages, pages had set little different, (but still targeted child element span):

        <li data-toggle="collapse" data-target=".navbar-collapse">                             <a class="navlink" href="website" target="_blank"><span class="navtextwhite" onclick="ga('send', 'event', 'volunteerhomepage', 'navbar', 'signup');">sign me up!</span></a>                         </li> 

because saw ^ wanted know if mattered whether onclick in parent or child element ga tracking.

thank time!

the onclick should on element want track i.e. <a href> tag.

if it's on div event fire when ever there's click within div, may not on <a href> tag. see 2 elements in snippet below example. clicking anywhere on second <div> fire event.

  function ga() {      console.log(arguments);    }

.col-12 {    width: 100%;    min-height: 150px;    background-color: #aff;    padding: 20px;  }    .col-6 {    width: 50px;    height: 50px;    background-color: #bbb;    margin: 10px;    padding: 20px;    float: left;  }

  <div class="top-container">    <div class="col-12">      <div class="col-6">        <a href="#" onclick="ga('send', 'event', 'participant_centre', 'click', 'pledgesheet');">pledge sheet</a>      </div>      <div class="col-6" onclick="ga('send', 'event', 'participant_centre', 'click', 'pledgesheet2');">        <a href="#">pledge sheet 2</a>      </div>    </div>  </div>

your tracking code may not work because web browser stop executing javascript on current page once new page starts load. sending data google analytics section of api documentation has detailed information on how ensure in far possible event recorded.