title: Blazor link - disable href if there's an onclick method
body: <p>In Blazor I have an <code>&lt;a&gt;</code> element that has both a <code>href</code> and an <code>onclick</code> method:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;a href=&quot;&quot; onclick=&quot;@(() =&gt; ChangePage(_someObject))&quot;&gt;Test&lt;/a&gt;
  </code></pre>
  <p><code>onclick</code> calls this method:</p>
  <pre class="lang-cs prettyprint-override"><code>  private bool ChangePage(object objectToDisplay)
    {
      _currentObject = objectToDisplay;
      StateHasChanged();
  
      return false;
    }
  </code></pre>
  <p>Normally in JavaScript returning false from the event method <a href="https://stackoverflow.com/a/22723324/1879019">stops the subsequent navigation to the link</a> in the <code>href</code> but this doesn't seem to be working with my code above.</p>
  <p>How can I stop Blazor changing the page to the root url after the link is clicked?</p>
  <p>(The obvious answer here would be to remove the <code>href</code> altogether, but I'm using the link in a bootstrap Pill and removing the <code>href</code> stops the Pills working)</p>
  <h3>Other things I've tried that didn't work:</h3>
  <ul>
  <li>Changing the <code>&lt;a&gt;</code> element to a span and setting the <code>data-target</code> attribute, but that stops the Pills rendering properly.</li>
  <li>Adding <code>return</code> into the <code>onclick</code> event (as per <a href="https://stackoverflow.com/a/22723324/1879019">this answer</a>): <code>onclick=&quot;return @(() =&gt; ChangePage(_overviewModel))&quot;</code> but that doesn't compile.</li>
  <li>Adding <code>return</code> after the <code>onclick</code> event: <code>onclick=&quot;@(() =&gt; ChangePage(_overviewModel)); return false;&quot;</code> but that doesn't compile either.</li>
  <li>using a Blazor <code>NavLink</code> component <code>&lt;NavLink  href=&quot;&quot; onclick=&quot;@(() =&gt; ChangePage(_someObject))&quot;&gt;NavLink&lt;/NavLink&gt;</code>.  That doesn't work, <a href="https://stackoverflow.com/a/60653319/1879019">see here</a> for more on that.</li>
  </ul>