Question

<a onclick="dataBounce('http://yahoo.com');" href="http://google.com">Yahoo? :-/</a>

<script>
function dataBounce(dest) 
{
  // Note: dest is assumed to be encodeURI()ed. 
  var ie = !-[1,];

  var bouncer = 'data:text/html;charset=utf-8,%3C%21doctype%20html%3E%3Cscript%3Ewindow.location%20%3D%20%27'+ dest +'%27%3B%3C/script%3E';
  console.log('bouncer: ' + bouncer);
  window.location = !ie ? bouncer : dest;
  return false;
}
</script>

Yeah, the href is to google, but I have an onclick handler hijacking the click on the link, to navigate to a data URI which bounces the window‘s location to yahoo. However, when I click the link, I’m still taken to google. Why?

Why do I want to do this? It’s partly just an experiment, and partly something I’d like to use in practice to protect users’ privacy: by creating an intermediate bouncer page, the referrer is shielded from the destination server.

Here’s the link:

http://jsbin.com/efaful/1

Answer 1

Because you need to return false after doing anything in the onclick to prevent the default behaviour of the link.

<a href="http://google.com" onclick="dataBounce('http://yahoo.com'); return false;" />link</a>

Or have your dataBounce function return false and:

<a href="http://google.com" onclick="return dataBounce('http://yahoo.com');" />link</a>