SPFx: Click on anchor is not working as expected (event handler is not called)

I had a little problem in one of my SPFx based WebParts (App) that i'm currently developing. The App contains anchor links with an onClick event handler and an href-Attribute ... nothing special at all.

I used the following code in my React project:

Ctor:

  constructor(props: IReactDatatableProps) {

    super(props);

...

    this.loadFolder = this.loadFolder.bind(this);

  }

Method code:

private loadFolder(e, item?) {    

    e.preventDefault();  

....

}

Event binding

 <a target="_blank" href="..." onClick={this.loadFolder} {value.Folder.Name}</a>

In the local workbench the event handling works perfectly but after I put the App on a regular modern SharePoint page the event was not handled. Instead the link was opened. During a debug session I found out that the event handler it not called! The reason: A CROSS SITE LINK :-( 

When an anchor tag inside a SharePoint App contains a link to a different site the onClick event is not respected. To solve this issue you have to remove the href-Attribute or set the value to "#". Then the click-event is working as expected.

In case you want to keep the href-Attribute you can use the data attribute data-interception="off". This attribute managed the internal SharePoint page router logic. To disable the logic on a link set the attribute to OFF. For more information about the data attribute see: Hyperlinking considerations in SharePoint Framework

Happy coding :-)