I have a button on the site I'm working on that uses an animation of a sprite sheet and therefore needs to be set as a background image. I need a regular click on the button to delay the redirection to another page for a split second to play the animation, however I still want the middle mouse clicks to function to open in a new tab without delay.
This currently works for me in Javascript, but it seems like a pretty bad idea for everything to be handled this way and not just have href.
So, I did this:
<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>
The idea is that a regular click starts the function and takes a delay, while the middle mouse click just goes directly to the href link.
Firefox. Chrome Safari ( , ).
, , href, , - . Javascript , , , , .
EDIT:
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);
}
});
});
, . , , .