title: How to fix html button click copy content browser inconsistency in jQuery?
body: <p>I have the following sample code, when I click on the top button, it's content will be copied to the bottom button, this works fine in Firefox and IE, but in Chrome, it only copies the character you clicked on, not the content of the whole button, but if you click on the edge or 4 corners of the upper button, the whole content will be copied to the bottom button, how do I fix the behavior in Chrome so it will be consistent with the other browsers ?</p>
  
  <pre><code>&lt;HTML&gt;
    &lt;HEAD&gt;&lt;META http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;/HEAD&gt;
  
    &lt;SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/SCRIPT&gt;
  
    &lt;SCRIPT&gt;
    $(document).ready(function()
    {
      $('button').click(function(event)
      {
        var Clicked_Button=event.target;
        $('#Target_Button').html($(Clicked_Button).html());
      });
    });
    &lt;/SCRIPT&gt;
  
    &lt;BODY&gt;
    &lt;CENTER&gt;
  
      &lt;BUTTON id=Source_Button style="width: 78px; height: 78px;" type=button&gt;
        &lt;TABLE width=60 border=0 cellspacing=0 cellpadding=5&gt;
          &lt;TR&gt;
            &lt;TD align=Center&gt;&lt;FONT color=blue size=4&gt;A&lt;/FONT&gt;&lt;/TD&gt;
            &lt;TD align=Center&gt;&lt;FONT color=blue size=4&gt;B&lt;/FONT&gt;&lt;/TD&gt;
          &lt;/TR&gt;
          &lt;TR&gt;
            &lt;TD align=Center&gt;&lt;FONT color=blue size=4&gt;C&lt;/FONT&gt;&lt;/TD&gt;
            &lt;TD align=Center&gt;&lt;FONT color=blue size=4&gt;D&lt;/FONT&gt;&lt;/TD&gt;
          &lt;/TR&gt;
         &lt;/TABLE&gt;
      &lt;/BUTTON&gt;
    &lt;P&gt;
    &lt;BUTTON id=Target_Button style="width: 78px; height: 78px;" type=button&gt;&lt;/BUTTON&gt;
  
    &lt;/CENTER&gt;
    &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>