nest nest - 3 months ago 20
AngularJS Question

JavaScript Button link prevent scroll on click

I have an Html link that I want to use as a button:

<a href="javascript:void(0)" class="btn btn-link" title="Click to copy" ng-click="copyToClipboard(item, $event)">{{ "{" + item.campaignGuid + "}" }}</a>


The problem is that after clicking, the link is scrolled into the middle of the page like this:

Before click

enter image description here

After click

enter image description here

The clicked row has scrolled to the vertical center of the page.

I have tried
$event.preventDefault()
or
href = "#"
but nothing works so far. Any solutions?

Answer

Instead of

$event.preventDefault()

use

$event.stopPropagation();

here is example:

<a href="" class="btn btn-link" title="Click to copy" ng-click="copyToClipboard(item, $event); $event.stopPropagation();">{{ "{" + item.campaignGuid + "}" }}</a>