3

我正在处理的网站上有一个按钮，它使用精灵表动画，因此需要设置为背景图像。我需要定期单击按钮以将重定向到另一个页面延迟几分之一秒才能播放动画，但是我仍然希望鼠标中键能够在新选项卡中打开，没有延迟。

目前我有这个在 Javascript 中工作，但对于所有事情都以这种方式处理而不只是有一个 href 似乎是一个非常糟糕的主意。

所以我做了这个：

    <script type="text/javascript">

    function delayed(){
    window.stop();
    setTimeout('window.location = "http://www.dog.com";', 800);}

    </script>

<a href="http://www.google.com" onclick="delayed();return false">I am a link</a>

这个想法是常规单击会触发该功能并导致延迟，而鼠标中键单击将直接转到 href 链接。

这适用于 Firefox。然而，在 Chrome 和 Safari 中，中间点击会触发该功能，结果会在同一窗口中打开狗链接（在完成的版本中，链接当然是相同的）。

基本上我只需要一个在点击时延迟但在中间点击时仍能正常工作的href。我的工作解决方案使用 Javascript 在中键单击时在新选项卡中打开，但令我震惊的是，这可能会覆盖浏览器设置，这可能是一个坏主意。

编辑：

与此同时，我使用 Jquery 找到了这个解决方案：

$(document).ready(function() {
      $(".delayed").click(function() {
        var href = $(this).attr('href');
        setTimeout(function() {window.location = href}, 800);
        return false;
    });
});

...和 ​​HTML： 

<a href="http://www.google.com/" class='delayed'></a>

这可行，但遇到了与 Chrome 将中键单击视为左键单击并因此在同一窗口中打开它的问题相同的问题。

我现在已经对其进行了修改，以包含来自 sransara 的内容，以便……我认为……一切都已解决。再次使用 Jquery：

$(document).ready(function() {
      $(".delayed").click(function(event) {
          var href = $(this).attr('href');
          if(event.button == 0){
        event.preventDefault ? event.preventDefault():event.returnValue = false;
        setTimeout(function() {window.location = href}, 800);    
         }
    });
});

似乎适用于所有浏览器。希望这些可以对将来偶然发现此页面的任何人有用。

4

1 回答 1

1

这只是一个快速的解决方案，但我认为它最适合您的需求。

标签代码HTML anchor：

<a href="http://www.google.com" onclick="delayed(event);">I am a link</a>

这是Javascript：

function delayed(event){
    window.stop();
    if(event.button == 0){
        event.preventDefault ? event.preventDefault():event.returnValue = false;
        setTimeout(function(){ window.location = "http://www.yahoo.com"; }, 800);

    }
}

有几个简单的变化：

  • 我已经删除了return falsefromonclick事件，但是新的代码行会event.preventDefault ? event.preventDefault():event.returnValue = false;阻止单击左键时的默认操作。
  • 并在 Javascript 中添加了一个按钮代码检查。

工作演示代码在这里。

这是一个快速的解决方案，需要改进的地方是：取出内联onclick事件并使用 JS 动态添加事件侦听器。

于 2012-04-26T00:36:58.630 回答