中间点击JS功能

Question

我在工作的网站上有一个使用精灵表动画的按钮，因此需要设置为背景图像。 我需要定期点击按钮才能将重定向延迟到另一个页面，只需几分之一秒即可播放动画，但我仍然希望鼠标中键点击功能在新标签页中打开，不会有任何延迟。

目前我在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);    
         }
    });
});

似乎适用于所有浏览器。 希望这些对未来在这个页面上磕磕绊绊的人都有用。

Answer 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);

    }
}

几乎没有简单的改变：

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

工作演示代码在这里 。

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