Right click to enable "open in new tab/window"


Michael Chodakis

My link is a javascript function that shows the loader and then navigates to the target link:

<script>
function go(url) {
  document.body.innerHTML = "some loader html";
  window.location = url;
}
</script>
<a href="javascript:go('test.php');">Click here</a>  

However, when the user right-clicks the link and wants test.phpto navigate to it in a new tab , the link doesn't work .

I want the link to work when the user opens it in a new tab/window. Is there a javascript/jquery way to achieve this?

thanks

Assisted Tacos

Your link should be a link, not a JavaScript function. Their main purpose is navigation. You can add additional behavior later in the click handler:

document.body.addEventListener('click', evt => {
  const link = evt.target.closest('a.use-loader');
  if (!link) return;
  evt.preventDefault();
  document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
  window.location.href = link.href;
});
<a href="https://example.com" class="use-loader">
  This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
<a href="https://example.org" class="use-loader">This one, too.</a>

or using jQuery:

$('body').on('click', 'a.use-loader', function () {
  document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
  window.location.href = $(this).attr('href');
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com" class="use-loader">
  This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
<a href="https://example.org" class="use-loader">This one, too.</a>

That way, the links will still work for any proxy that doesn't run JavaScript, including browsers opening new tabs and users running NoScript.

Related


How to enable right click in jquery?

username So I got this jquery min javascript file which is blocking the right click functionality in my page. I don't know where to re-enable the right click, I searched the whole code and found nothing: the first line I searched was: var Z=/^(?:input|select|t

How to enable right click in jquery?

username So I got this jquery min javascript file which is blocking the right click functionality in my page. I don't know where to re-enable the right click, I searched the whole code and found nothing: the first line I searched was: var Z=/^(?:input|select|t

Enable right click: <body oncontextmenu="return false">

username I have a webpage (not controlled): <body oncontextmenu="return false"> I want to enable right click, but I can't do it. In the saved html, when I removed oncontextmenuit, it started working. I have tried everything mentioned here but it doesn't work

Enable right click: <body oncontextmenu="return false">

username I have a webpage (not controlled): <body oncontextmenu="return false"> I want to enable right click, but I can't do it. In the saved html, when I removed oncontextmenuit, it started working. I have tried everything mentioned here but it doesn't work

How to enable right click using JavaScript?

username Hi I'm preparing a website for a friend and right click is disabled and I want to enable it, and I haven't used JavaScript (learning), but from my research disabling right click is done by using oncontextmenu="return false;". But I searched the js d

Enable right click: <body oncontextmenu="return false">

username I have a webpage (not controlled): <body oncontextmenu="return false"> I want to enable right click, but I can't do it. In the saved html, when I removed oncontextmenuit, it started working. I have tried everything mentioned here but it doesn't work

More efficient way to enable right click?

m0meni I've written this script before and for me it works better than any other right click enabled extension. function rightClickEvent(event) { event.stopPropagation(); return true; } function enableRightClick(elements) { if (elements.length === 0) re

Right click to enable "open in new tab/window"

Michael Chodakis My link is a javascript function that shows the loader and then navigates to the target link: <script> function go(url) { document.body.innerHTML = "some loader html"; window.location = url; } </script> <a href="javascript:go('test.php');"

How to enable right click macros for tables?

stacked I have the following code that works for a normal sheet, but when I try to right click on the sheet, the macro doesn't appear. I tried the following but I get an "Object Required" error message on the first line: With ContextMenuListRange.Controls.Add(

How to enable right click using JavaScript?

username Hi I'm preparing a website for a friend and right click is disabled and I want to enable it, and I haven't used javascript (learning), but from my research disabling right click is done by using oncontextmenu="return false;". But I searched the js d

How to enable left click drag or right click in swt.browser

Crazy C I am trying to embed a web browser in a Java application. Unfortunately, it has to be in the app and can't open the browser. I have found org.eclipse.swt.browser . I am using this browser to display a 3D model and when I click and drag the mouse in the

How to enable left click drag or right click in swt.browser

Crazy C I am trying to embed a web browser in a Java application. Unfortunately, it has to be in the app and can't open the browser. I have found org.eclipse.swt.browser . I am using this browser to display a 3D model and when I click and drag the mouse in the

How to enable right click in p5.js?

ObamoDank I'm making a minesweeper clone where left clicking will reveal the cell, while right clicking should mark the cell. I'm using the function mouseClicked()- this allows me to display on click and also on click. I try to use if(mouseIsPressed) { if(

C# Excel Addin Ribbon Enable Right Click on Cell Text

Grigoris Lucidis I am developing a Microsoft Excel add-in. I need to add a button to the context menu (right click) of the cell's selected text. I found the ContextMenuCell idMso but this only works for right click on the whole cell. Here is the xml of my ribb

Enable "Real" Right Click on Windows 7 on MacBook Pro

ericvg On the MacBook Pro (the new unibody model), is there any way to enable a true right click (using the right side of the touchpad - not using the two finger click method) under Windows 7? The option is available under OSX, so I guess it's just a trackpad/

How to enable right click in p5.js?

ObamoDank I'm making a minesweeper clone where left clicking will reveal the cell, while right clicking should mark the cell. I'm using the function mouseClicked()- this allows me to display on click and also on click. I try to use if(mouseIsPressed) { if(

How to enable right click in p5.js?

ObamoDank I'm making a minesweeper clone where left clicking will reveal the cell, while right clicking should mark the cell. I'm using the function mouseClicked()- this allows me to display on click and also on click. I try to use if(mouseIsPressed) { if(

How to enable right click in p5.js?

ObamoDank I'm making a minesweeper clone where left clicking will reveal the cell, while right clicking should mark the cell. I'm using the function mouseClicked()- this allows me to display on click and also on click. I try to use if(mouseIsPressed) { if(

How to enable right click in p5.js?

ObamoDank I'm making a minesweeper clone where left clicking will reveal the cell, while right clicking should mark the cell. I'm using the function mouseClicked()- this allows me to display on click and also on click. I try to use if(mouseIsPressed) { if(

Enable "Real" Right Click on Windows 7 on MacBook Pro

ericvg Is there any way to enable true right-click (using the right side of the touchpad - not using the two-finger click method) under Windows 7 on the MacBook Pro (the new unibody)? The option is available under OSX, so I guess it's just a trackpad/boot-trai

How to enable right click in p5.js?

ObamoDank I'm making a minesweeper clone where left clicking will reveal the cell, while right clicking should mark the cell. I'm using the function mouseClicked()- this allows me to display on click and also on click. I try to use if(mouseIsPressed) { if(

Enable click to click Kubuntu

Scarabs and the Code Wizard I just installed Kubuntu on a Dell XPS 15 9570. Everything works fine, except for clicking the touchpad. I can activate the option in settings, but it doesn't work. Scarabs and the Code Wizard After some additional searching I found