javascript - Run custom function before open in new tab - Stack Overflow

I am using an <a> tag instead of a button because I need to add the feature that allow user to right click and then open in new tab:

The issue right now is that this tag have an onClick function which simply doesn't run at all when user select open link in new tab. I need this function to run because it would show a warning dialog before navigating to other page. This is the code, any advice would be appreciated!

<a
    mat-flat-button
    class="action"
    [routerLink]="'/sponsor'"
    [queryParams]="{ id: 'sponsorId', viewPk }"
    [disabled]="isLoading || dataLength === 0 || !isFiltering"
    (click)="onClickNavigateToPageX()"
  >
    <mat-icon svgIcon="graph" class="icon"></mat-icon>
    See graph
  </a>

I am using an <a> tag instead of a button because I need to add the feature that allow user to right click and then open in new tab:

The issue right now is that this tag have an onClick function which simply doesn't run at all when user select open link in new tab. I need this function to run because it would show a warning dialog before navigating to other page. This is the code, any advice would be appreciated!

<a
    mat-flat-button
    class="action"
    [routerLink]="'/sponsor'"
    [queryParams]="{ id: 'sponsorId', viewPk }"
    [disabled]="isLoading || dataLength === 0 || !isFiltering"
    (click)="onClickNavigateToPageX()"
  >
    <mat-icon svgIcon="graph" class="icon"></mat-icon>
    See graph
  </a>

• javascript
• html
• angular
• onclick

Share Improve this question Follow edited Apr 1 at 19:28 Christoph Rackwitz 16k55 gold badges3939 silver badges5151 bronze badges asked Jan 16 at 4:17 Thuan TranThuan Tran 32911 silver badge1616 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

I can't say what's the best solution for the particular use case, but there are various points to consider when deciding what's the best tradeoff:

• the decision to use an a or button tag should not be determined by the presence of the menu. One is a navigational element and the other is used to perform actions on the page. If it's a navigation on a website, <a> is probably the right tag.
• the context menu is a browser "thing" and it's in the control sphere of the user. Depending upon your site's philosophy you should not mess up with the browser's basic functionality.
• when the user navigates away from your page, the browser will trigger the beforeunload event, which will trigger when the current page is being closed. It is a browser's native functionality (the same you get here on StackOverflow when you leave a page with unsaved changes), so it's not customizable in style, but it suits more an HTML-first approach. If you need an 'unsaved changes' message, this is the usual way to go.
• you can use good ol' window.open with target _blank in a button javascript handler if you want to expose a button with the open in new tab functionality. This way you stay in your JavaScript context and can do whatever you need.
• if you want more of a Single Page Application style, you can replace the native context menu with something else, as suggested, but you have to evaluate if you are building an application or a website. I like the websites I use to behave like websites and do not interfere with my browser's basic capabilities. YMMV.

Probably there are more considerations worth taking, but this are the ones from the top of my mind.

You already correctly figured out that it cannot work the way you want. You need an idea, right? Here is it: therefore, you need to modify your design. This way, you can combine both kinds of behavior you need.

One of the different possible solutions could be this: on your <a> element, you can handle the event "contextmenu". In the handler of this event, you can implement some custom context menu, or some equivalent behavior that gives the user the opportunity to choose one of alternative actions. At the same time, if the user simply activates the anchor, the navigation will load a new page according to a href value, and, if the user holds Shift key — in a new tab.

Let's assume for simplicity that the page has only one <a> element:

<a href="https://stackoverflow.com">Stack overflow</a>

Then it could be set up like this:

const anchor = document.querySelector("a"); // or more complicated selector
anchor.addEventListener("contextmenu", event => {
    // activate menu or something, depending on event.target
});

One of the options in this custom context menu could provide the optional side effect you want. One option may be navigation to the page according to anchor's href, but with the call to your side-effect function.

How to implement a custom menu behavior? This is a separate question. I personally have such a component so I can share it. Or you can implement something, depending on what you want.

Another alternative could be a composite control that has two inner elements: <a>, to provide navigation to the page according to href, in a separate tab or not, and another one to provide the choice of action, not necessarily simulating the behavior of a context menu.

You decide.

You could use CanDeactivate guard built into to angular. a use case in this blog here: https://medium.com/@altamashali/angular-candeactivate-guard-e9069e1adf0f

We have a NavigateAwayService in our app that utilises this. for when we want to show a popup saying "You have unsaved changes / are you sure?" when a user tries to navigate forward or back or close the browser tab.