Anchor tag reloading the page instead of handling onclick in IE

Question

My anchor tag is

<a onclick="redirectCHUB(); return false;" target="_blank" href="#">

It reloads the current page in another tab and do not run the function.

I have tried href="javascript:void(0)" also. It reloads the javscript:void(0) in another tab.

I am using href because it doesn't work as a link in IE 9 ,10.

P.S: redirectCHUB() is a POST request Ajax call whose success will redirect to page in another tab

It's unrelated to the problem, but why would you put `target="_blank"` on a link you intend will never be followed? — T.J. Crowder, Feb 13 '15 at 09:43

score 1 · Answer 1 · edited May 23 '17 at 12:27

If you look in the web console of your browser, you'll probably see an error saying that redirectCHUB is not defined. Since the function call fails (throws an exception), the return false is never executed, and the default action isn't prevented.

To call a function from an attribute event handler, it has to be a global function. (This is one of many reasons not to use them, see below for an alternative.)

If the function is a global, that attribute works:

function redirectCHUB() {
  var p = document.createElement('p');
  p.innerHTML = "redirectCHUB ran";
  document.body.appendChild(p);
}

<a onclick="redirectCHUB(); return false;" target="_blank" href="#">click me</a>

To use a non-global function (which is preferred), use advanced event handling hookup. To do that, you'll need a way to identify the anchor you want to add the handler to. That can be any CSS selector; ids are handy but of course limited (they have to be unique on the page) and a bit inflexible.

Using modern event handling still requires allowing for older versions of IE that use Microsoft's attachEvent instead of addEventListener; this answer has a fully-implemented cross-browser means of doing it.

Here's an example using that hookEvent function:

// The hookEvent function; you obviously just stick this off in a
// library file or some such...
var hookEvent = (function() {
  var div;

  // The function we use on standard-compliant browsers
  function standardHookEvent(element, eventName, handler) {
    element.addEventListener(eventName, handler, false);
    return element;
  }

  // The function we use on browsers with the previous Microsoft-specific mechanism
  function oldIEHookEvent(element, eventName, handler) {
    element.attachEvent("on" + eventName, function(e) {
      e = e || window.event;
      e.preventDefault = oldIEPreventDefault;
      e.stopPropagation = oldIEStopPropagation;
      handler.call(element, e);
    });
    return element;
  }

  // Polyfill for preventDefault on old IE
  function oldIEPreventDefault() {
    this.returnValue = false;
  }

  // Polyfill for stopPropagation on old IE
  function oldIEStopPropagation() {
    this.cancelBubble = true;
  }

  // Return the appropriate function; we don't rely on document.body
  // here just in case someone wants to use this within the head
  div = document.createElement('div');
  if (div.addEventListener) {
    div = undefined;
    return standardHookEvent;
  }
  if (div.attachEvent) {
    div = undefined;
    return oldIEHookEvent;
  }
  throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();

// Note that this code must be in a script tag AFTER the link;
// best place is right at the end, just before the closing </body>
// tag
(function() {
  // This scoping function ensures our functions aren't globals,
  // to demonstrate using non-globals
  
  // Our click handler
  hookEvent(
    document.getElementById("the-link"),
    "click",
    function(e) {
      redirectCHUB();
      e.preventDefault();
    }
  );
  
  // Target function
  function redirectCHUB() {
    var p = document.createElement('p');
    p.innerHTML = "redirectCHUB ran";
    document.body.appendChild(p);
  }
})();

<a id="the-link" target="_blank" href="#">click me</a>

Anchor tag reloading the page instead of handling onclick in IE

1 Answers1