Question

我的锚标签是

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

它在另一个选项卡中重新加载当前页面，但不运行该功能。

我也试过了href="javascript:void(0)"。它在另一个选项卡中重新加载javscript：void（0）。

我正在使用href，因为它在IE 9,10中不能作为链接工作。

P.S：redirectCHUB（）是一个POST请求Ajax调用，其成功将重定向到另一个选项卡中的页面

Answer 1

如果您查看浏览器的Web控制台，您可能会看到一条错误消息，指出未定义redirectCHUB。由于函数调用失败（抛出异常），因此永远不会执行return false，并且不会阻止默认操作。

要从属性事件处理程序调用函数，它必须是全局函数。（这是不使用它们的众多原因之一，请参阅下面的替代方案。）

如果函数是全局函数，则该属性有效：

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>

要使用非全局函数（首选），请使用高级事件处理连接。要做到这一点，您需要一种方法来识别要添加处理程序的锚点。那可以是任何CSS选择器; id很方便但当然有限（它们必须在页面上是唯一的）并且有点不灵活。

使用现代事件处理仍然需要允许使用Microsoft attachEvent而不是addEventListener的旧版IE？ this answer有一个完全实现的跨浏览器方式。

以下是使用hookEvent函数的示例：

// 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>

锚标签重新加载页面而不是在IE中处理onclick

1 个答案: