I know I can use capture the Right Click event by using jQuery's "contextmenu" but my question is, how can I capture the event after the context menu appears i.e. When the user clicks on "Open Link in New Tab" action.

Any help?

Thanks.

I know I can use capture the Right Click event by using jQuery's "contextmenu" but my question is, how can I capture the event after the context menu appears i.e. When the user clicks on "Open Link in New Tab" action.

Any help?

Thanks.

• javascript
• jquery
• browser
• contextmenu
• right-click

• You refer this post here: stackoverflow./questions/850058/… – Gokul Chandrasekaran Commented Mar 12, 2018 at 5:48
• 2 I referred to the link that you provided and it seems they are dealing with the page after it has been opened in another tab. Like looking at it's history on the page load event. What I need to do is rather capture the event on the same page before opening the new page. – pso Commented Mar 12, 2018 at 7:37
• 1 I don’t think that is possible at all, at least not from JS running in a website context. This smells very X/Y problem-y - can you please describe what actual problem you are trying to solve with this? – C3roe Commented Mar 12, 2018 at 8:07
• 1 My situation is that I have a search result page which is in an ASPX application. When the user clicks on a particular link (which appears upon hovering) in the result row from the search result, I need to turn that row into a different color to identify that it has been viewed. A regular click I can handle no problem. However when the user opens this link by using "Open Link In New Tab" context menu, I don't know if I can capture this click. Thanks for introducing me to the X/Y problem though. – pso Commented Mar 12, 2018 at 9:24
• This action can be tracked using the extension developer.chrome./docs/extensions/reference/api/… – DiD Commented Oct 14, 2024 at 9:04

4 Answers 4

It's not possible, however, you can use a workaround to detect similar behavior. For example, if you're dealing with links ( tags), you can listen for the click event and check if the user is using Ctrl (Windows) or Cmd (Mac) to open the link in a new tab:

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    if (e.ctrlKey || e.metaKey) {
      console.log('Link opened in a new tab');
    }
  });
});

This method will capture when a user opens a link in a new tab using the keyboard shortcut.

Alternatively, you can create a custom context menu that captures right-click actions and manage the "Open in New Tab" functionality within your app.

No, it is not possible to directly capture the "Open in New Tab" event from the browser's context menu using JavaScript. This is due to security and privacy reasons, as browsers do not expose such low-level interactions to web pages.

Unfortunately, we cannot detect native context menu events. The only way to do something like you want would be to create your own custom context menu. This way, you would be able to display this context menu when clicking on links.

You could create your own method to open links in a new tab. Something like this:

function openLinkInNewTab(event, element) {
    window.open(element.href, '_blank');
}

You can try the following snippet where I created a custom context menu when clicking on links.

function renderContextMenu(menu, context, element) {
  context.innerHTML ='';

  menu.forEach(function(item){
    let menuitem = document.createElement('div');
    menuitem.innerHTML = item.text;
    menuitem.addEventListener('click', (event) => item.action(event, element));

    context.appendChild(menuitem);
  });
}

function openLinkInNewTab(event, element) {
  alert(`the code below need to be unmented in to open ${element.href} in a new tab.`);
  // window.open(element.href, '_blank');
}

const contextMenuItems = [
  {
    text: 'Open link in new tab',
    action: openLinkInNewTab
  }
];

window.addEventListener('load', function() {
  document.querySelectorAll('a').forEach((elm) => {
    elm.addEventListener('contextmenu', function(e) {
      e.preventDefault();
      const customContext = document.getElementById('customContext');
      renderContextMenu(contextMenuItems, customContext, elm);

      // position menu at the right-click cursor
      customContext.style.left = e.clientX + 'px';
      customContext.style.top = e.clientY + 'px';
      customContext.classList.add('show');
    })
  });
});

window.addEventListener('click', function() {
  // hide the menu when clicking outside of it
  const customContext = document.getElementById('customContext');
  customContext.classList.remove('show');
});

.context-menu {
  position: fixed;
  display: none;
  width: 180px;
  box-shadow: 2px 2px 9px #aaa;
  overflow: hidden;
  border:solid 1px #aaa;
}
.context-menu > div {
  padding: 10px;
  background: #eee;
  border-bottom: solid 1px #aaa;
  font-size: 11pt;
  cursor: pointer;
}
.context-menu > div:hover {
  background: #fff;
}
.context-menu.show{
  display: block;
}

<div class='context-menu' id='customContext'></div>

<a href="https://google.">Go to Google</a>

Based on your ment about styling links that the user has visited: You can use the :visited selector in CSS to match <a>-tags that the user has already visited.
Combining that with :has(), you can select elements that contain already visited links with :has(:visited)