[Vuejs]-How to make an anchor element trigger a javascript function on left click, but open a new page on middle click?

by

0👍

I don’t know what is middle click, but let’s assume you mean left and right clicks.

When you click on the element using the right click, it triggers contextmenu event, in this case the browser shows a context menu, but in your case you want to open the details of the issue.

What you need to do is to listen to contextmenu event on your anchor, prevent opening the context menu, then add your implementation of opening the details and replacing the url search query like so:

yourAnchorElement.addEventListener("contextmenu", (e) => {
   // Prevent the browser from opening the context menu
   e.preventDefault();

   // Add your Vue logic to open the issue details here....

   // Changing the url with the issue id steps:
   const url = new URLSearchParams(window.location.href);

   // append the issue id to the search param
   url.set("selectedIssue", "AT-33");

   // Update the page url without refreshing using the pushState
   window.history.pushState({issueId: 15}, "", url.toString());
});

Here is the MDN docs for the pushState.

You need just to convert this vanilla JS implementation with Vue, i.e. add the listener for the contextmenu event the way you normally do in Vue and pass the implementation function above.

Leave a comment