I want to make a link work only when modifiers are pressed

Question

I'm trying to make a my link work only when Ctrl+Shift is pressed, otherwise I'd like it to do nothing. I can't seem to get it to work though. Any ideas?

<html> 
<head> 
<script type="text/javascript">
function keycheck(){
if (e.ctrlKey && e.shiftKey) {;          
    document.getElementById("hello").onclick = function() {
    location.href='http://www.mylink.com/';
    }
}
else {;
document.getElementById("hello").onclick = function() {
   location.href='#';
        }
    }
}
</script> 
</head> 
<body> 
<a href="#" onClick="keycheck()" id="hello">HELLO</a>
</body> 
</html>

Have you got any frameworks or libraries already loaded that can help you or are you using pure JS? The jQuery event http://api.jquery.com/category/events/event-object/ has the shiftKey property for example. — StuperUser, Mar 05 '14 at 16:17
This wil never work, you are checking key events in a mouse event. Also have you tried opening your console window? — Dieterg, Mar 05 '14 at 16:20
@DieterGoetelen It's possible. A handler updates a `isShfitKeyDown` flag on each keydown, keyup event on the document which is checked in a onClick handler. — StuperUser, Mar 05 '14 at 16:23

score 0 · Answer 1 · answered Mar 05 '14 at 16:18

Couple of things:

Without the use of a library such as jQuery you're going to get inconsistent results from straight onClick handlers. Especially when it comes to accessing the event object. If you are avoiding such libraries on purpose then be sure to research handling events a little more.
With the above caveat, your basic approach is to do the same condition you have but simply cancel the event behavior if it false (so they didn't have both keys pressed). You don't have to do anything when it's true because that is the default behavior anyway.

Event handling and cancelling is one of the areas where libraries prove extremely useful so you may get easier and better results using one and binding an on() or click() handler from which you can event.preventDefault();

score 0 · Answer 2 · answered Mar 05 '14 at 16:32

Why? (curious)
You've already fired onclick using the A tag. You can't also onclick from the function you called onclick.
In order to reference e, you have to pass it in as an argument.
You can't pass e in as an argument, you want to reference event

This works

<script type="text/javascript">
function foo() {
    console.log(event.ctrlKey);
    console.log(event.shiftKey);
}
</script>

<a href="#" onclick="foo()">Foo

In the console, you'll see true or false if either of those keys are pressed at the time you click the link.

In order to have this link go to a specific URL when they are both pressed:

<script type="text/javascript">
function foo() {
    if ( event.ctrlKey && event.shiftKey) {
        window.location.href="foo.htm";
    }
}
</script>

<a href="#" onclick="foo()">Foo

HOWEVER, in some browsers, pressing SHIFT + click opens the URL of a link in a new browser window. I can't think of a way to prevent that since it's a browser setting, which can't be controlled by JavaScript. What will happen in that case is that the current window will go forward to "foo.htm", but the link "#" will be opened in a new browser window.

Thank you! That worked well. I just put the onClick on the div instead of on a link. I'm trying to recreate this [link](https://www.youtube.com/watch?v=pXPXMxsXT28) One more question though, does "ctrlKey" translate to the CMD key on a mac? Because my friend is on his mac and swears it's not working, though it is for me. — JohnShafto, Mar 05 '14 at 18:04
re: command key - http://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript — Adrian J. Moreno, Mar 05 '14 at 20:24

I want to make a link work only when modifiers are pressed

2 Answers2