Question

我正在尝试创建一个正常指向URL 1的链接，并在按住shift键时创建指向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

似乎浏览器在按下shift键的同时更加忙于更新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>

现在唯一的问题是 - 正如Romain Deveaud所指出的那样 - SHIFT + Click会打开一个新的浏览器窗口。

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>

这似乎适用于谷歌浏览器，但非常糟糕。

jQuery：当修改器按下时链接改变 - 但链接停止工作

2 个答案: