我正在使用的站点上有一个按钮,该按钮使用Sprite工作表动画,因此需要将其设置为背景图像。我需要定期单击该按钮才能将重定向到另一页面的时间延迟几分之一秒才能播放动画,但是我仍然希望单击鼠标中键以在新选项卡中打开功能,而不会出现延迟。
目前,我正在使用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);
}
});
});
似乎可以在所有浏览器中使用。希望这些对将来在本页面上绊脚石的任何人有用。
最佳答案
这只是一个快速的解决方案,但我认为它基本上可以满足您的需求。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 false
事件中删除了onclick
的,但是单击了新代码行event.preventDefault ? event.preventDefault():event.returnValue = false;
,prevents default action。 工作示例代码为here。
这是一个快速的解决方案,需要改进的地方是:
取出内联
onclick
事件,并使用JS动态添加事件监听器。