title: How to call Javascript Function on radio button click not on focus
body: <p>I have a table which contains a radio button in every row. I am calling a JavaScript function <code>onclick</code> event on radio button like this</p>
  
  <pre><code>&lt;input type="radio" id="rdbSelect" name="Select" onclick="MyFunction()" /&gt;
  </code></pre>
  
  <p>But when I press <code>Down/Up</code> arrow in keyboard, focus goes to <code>Next/Previous</code> radio button function calls again.</p>
  
  <p>I want that function to be called only when radio button is clicked by mouse, not on focus.</p>
  
  <p>Here is my Code</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div style="width:400px"&gt;
      &lt;table class="style1" id="Table1"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;input type="text" id="text1" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="text" id="text2" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="radio" id="rdbSelect" name="Select" onclick="Test()" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JavaScript</p>
  
  <pre><code>function CreateGrid() {
      var Grid = document.getElementById('Table1')
      for (var i = 1; i &lt; 6; i++) {
          var newrow = Grid.rows[Grid.rows.length - 1].cloneNode(true);
          newrow.cells[0].innerText;
          newrow.cells[1].children[0].value = '';
          newrow.cells[2].children[0].value = '';
          Grid.getElementsByTagName('tbody')[0].appendChild(newrow);
      }
  }
  
  function Test() {
      alert("Hello");
  }
  </code></pre>
  
  <p>Any help will be appreciated.</p>