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

    }
}

几乎没有简单的改变：

我从<{1}}事件中删除了 return false，但点击了新代码行onclick，prevents default action。
并将button code check添加到Javascript。

工作演示代码为here。

这是一个快速解决方案，一些需要改进的方面是：取出内联event.preventDefault ? event.preventDefault():event.returnValue = false;事件，并使用JS动态添加事件监听器。

中间点击JS功能

1 个答案: