jQuery: Link changing when modifier held down - but link stops working

Question

Hi folks,

I'm trying to create a link that points to URL 1 normally and to URL 2 when the shift key is held down. I arrived at this code sample, which properly switches the links (as indicated in the browser status bar when hovering over the link), but clicking on URL 2 doesn't work: the browser just doesn't do anything. That's right: a link is present, but clicking it just doesn't do anything.

Tried this in Firefox 3.6.6 and Safari 5.0, same result in both.

Any hints? Thanks!

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
<script>
$(document).keydown(function(event) {
  if (event.keyCode == '16') {
    $("#mylink").text("My Link Extended");
    $("#mylink").attr("href", "http://www.google.com/");
  }
});
$(document).keyup(function(event) {
  if (event.keyCode == '16') {
    $("#mylink").text("My Link");
    $("#mylink").attr("href", "bla");
  }
});
</script>
<a href="normalurl" id="mylink">My Link</a>

Answer 1

It looks like because the shift key is held down the Dom thinks that the "browser" will handle a special request. so that when the command is sent to the DOM To open it fails.

I done a little test and come up with this.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
<script>
$(document).keydown(function(event) {
  if (event.keyCode == '16') {
      event.keyCode = null; //Remove that
    $("#mylink").text("My Link Extended");
    $("#mylink").attr("href", "http://www.google.com/");
      event.keyCode = '16'; //Add it back
  }
});
$(document).keyup(function(event) {
  if (event.keyCode == '16') {
    event.keyCode = null; //Remove that
    $("#mylink").text("My Link");
    $("#mylink").attr("href", "bla");
    event.keyCode = '16'; //Add it back
  }
});
</script>
<a href="normalurl" id="mylink">My Link</a>

And this seems to work in Google Chrome, but is pretty hacky.

Answer 2

Seems the browser got a little bit too busy updating the DOM while the shift key was pressed, so I put a flag in place:

<script type="text/javascript">
  $(document).ready(function() {
    var ExtendedLinkShown=false;

    $(document).keydown(function(event) {
      if (!ExtendedLinkShown && event.keyCode == '16') {
        $("#mylink").text("My Link Extended");
        $("#mylink").attr("href", "http://www.google.com/");
        ExtendedLinkShown=true;
      }
    });
    $(document).keyup(function(event) {
      if (event.keyCode == '16') {
        $("#mylink").text("My Link");
        $("#mylink").attr("href", "bla");
        ExtendedLinkShown=false;
      }
    });
  });
</script>

Only issue now is that - As pointed out by Romain Deveaud - SHIFT + Click opens a new browser window.