防止链接点击事件，除非在新的 window 热键中打开

Question

So I have my website, a website without reload between site switches. For SEO reasons, my links look like this:

<a href="/site2" id="viewmore">View more</a>
<script>
// code is strongly simplified, for more clarity
document.getElementById("viewmore").addEventListener("click",function(e) {
   e.preventDefault();
   myHandler.goTo(e.currentTarget.href);
});
</script>

myHandler is the site handler in this case.

If I click the hotkey for opening a link in a new tab (on Mac it is CMD+Click), it does not work, as the event is prevented.

How to check if the link should open in a new tab or not? (Check if the hotkey is pressed or not)

Answer 1

Not sure I understood it, but try this

document.getElementById("viewmore").addEventListener("click", (e) => {
 // ctrlKey / altKey / shiftKey
 if (e.ctrlKey) myHandler.goTo(e.currentTarget.href);
 else e.preventDefault();
});

Answer 2

You can store the state of the CMD key in a variable and check it when the link is clicked.

let isCmdPressed = false;

document.addEventListener("keydown",(e)=>{
  if (e.key == "Meta"){
    isCmdPressed = true;
  }
});

document.addEventListener("keyup",(e)=>{
  if (e.key == "Meta"){
    isCmdPressed = false;
  }
});

document.getElementById("viewmore").addEventListener("click",function(e) {
   if (!isCmdPressed){
     e.preventDefault();
     myHandler.goTo(e.currentTarget.href);
   }
});