title: The event handler of an html button not fired when child element clicked
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="emailbtn" class="cen-inline-block w3-button cen-bg-color-fade-min cen-padding-small w3-small cen-margin-left-small cen-align-top cen-round-top-right cen-hover-text-white-fade aim-trigger aim-datafill"  style="width:30px;height:30px"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Note Assign function is called when DOM loads completely
  function Assign(){
  var element = document.getElementById('emailbtn');
  //if addEventListiner is supported by the browser
          if (element.addEventListener) {
              
                 element.addEventListener("click", rhandler,false);
                
             }
             //if attachEvent is supported
             else if (element.attachEvent) {
                 element.attachEvent('onclick', rhandler);
             }
             else {
                 //add to the element DOM property
                 element['onclick'] = rhandler;
             }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to assign an event handler to the click event of a button using addEventListener.
  When exactly the button is clicked, it fires the assigned event handler. But when any of the buttons child element (font awesome icon) is clicked the event handler is not fired (nothing happens) on chrome.</p>
  
  <p>Please, I need any assistance on how I can make the event handler to fire when any part or child element of the button is clicked in chrome browser.</p>