jQuery：修飾子が押されたときにリンク変更 - しかし、リンクは動作を停止します

Question

通常、URL 1を指すリンクを作成しようとしています。また、シフトキーが押されたときにURL 2を作成しようとしています。このコードサンプルに到着しました。リンクを適切に切り替えます（リンク上にホバリングするときにブラウザステータスバーに示されているように）が、URL 2をクリックすることは機能しません。ブラウザは何もしません。そうです：リンクが存在しますが、クリックすると何もしません。

Firefox 3.6.6とSafari 5.0でこれを試してみましたが、両方とも同じ結果です。

ヒントはありますか？ありがとう！

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<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

シフトキーが押されている間、ブラウザがDOMの更新に少し忙しすぎたように思えますので、フラグを設置しました。

<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>

今の問題だけが - ロマン・デヴアードによって指摘されているように - シフト + [新しいブラウザ]ウィンドウをクリックします。

Answer 2

Shiftキーが押されているため、DOMが「ブラウザ」が特別なリクエストを処理すると考えているように見えます。そのため、コマンドがDOMに送信されて開くと失敗します。

私は少しテストをして、これを思いつきました。

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<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>

そして、これはGoogle Chromeでは機能しているようですが、かなりハッキーです。