现有 onclick 事件的 Javascript IE8 包装器答案

【问题标题】：Javascript IE8 wrapper for existing onclick event现有 onclick 事件的 Javascript IE8 包装器
【发布时间】：2013-07-09 21:53:05
【问题描述】：

我必须在原始 onclick 事件触发之前调用另一个函数，在找到以下解决方案之前我已经尝试了很多不同的路径：

function bindEnableFieldToAllLinks() {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        var onclick = link.getAttribute('onclick');
        link.onclick = new Function("if(linkClickHandler()){"+onclick+"}");
        console.log(link.getAttribute('onclick'));
    }
}

这在 Firefox 和 chrome 中可以解决问题，但 IE8 的行为很奇怪，似乎 onclick 变量中的函数没有执行，
我已经添加了在 if 语句为真之后触发的 console.log 消息，如果我打印出 onclick 属性，我会得到以下信息：

LOG: function anonymous() {
if(linkClickHandler()){function onclick()
{
if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('hoedanigheidForm'),      {'hoedanigheidForm:j_id_jsp_443872799_27':'hoedanigheidForm:j_id_jsp_443872799_27'},'');}return false
}}
}

因此，该功能似乎在链接的 onclick 上，并且旧的 onclick 功能也在它上面。
有人可以帮我解决这个问题吗？

谢谢

【问题讨论】：

您可以使用 addEventListener 并根据需要添加任意数量的事件处理程序，而不是使用 onclick 并尝试在同一事件中绑定 2 个方法...
@Givi addEventListener 在 IE8 中不受支持
@RayNicholus 是的，如果他想要跨浏览器解决方案，你是对的，使用 addEventListener 和 attachEvent 编写自定义函数很容易

标签： javascript javascript-events event-handling

【解决方案1】：

假设您在 HTMLElement 上有一个 onclick 属性..

<span id="foo" onclick="bar"></span>

现在，

var node = document.getElementById('foo');
node.getAttribute('onclick'); // String "bar"
node.onclick; // function onclick(event) {bar}

后者看起来对您想要实现的目标更有用，因为使用 它仍然具有原来的范围，并且您不必使用 Function 重新 evaluate 代码。

function bindEnableFieldToAllLinks() {
    var links = document.getElementsByTagName('a'),
        i;
    for (i = 0; i < links.length; i++) function (link, click) { // scope these
        link.onclick = function () { // this function literal has access to
            if (linkClickHandler())  // variables in scope so you can re-
                return click.apply(this, arguments); // invoke in context
        };
    }(links[i], links[i].onclick); // pass link and function to scope
}

此外，在 onclick 属性中设置一个 命名函数（即作为 String）不会实现任何效果； the function doesn't invoke or even enter the global namespace 因为它被包装了。
设置一个匿名的会更糟，当 onclick 尝试执行时会抛出 SyntaxError。

【讨论】：

【解决方案2】：

这将做你想做的事，首先执行linkClickHandler 中的内容，然后执行onclick 事件。我添加了一个基本的跨浏览器事件订阅功能供您重复使用。

bindEnableFieldToAllLinks();    

function bindEnableFieldToAllLinks() {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        var onclick = link.getAttribute('onclick');
        onEvent(link, 'click', function() { 
            linkClickHandler(onclick);
        });
        link.onclick = undefined;
    }
}

function onEvent(obj, name, func) {
    if (obj.attachEvent) obj.attachEvent('on' + name, func);
    else if (obj.addEventListener) obj.addEventListener(name, func);    
}
function linkClickHandler(funcText) {
    alert('before');
    var f = Function(funcText);

    f();
    return true;
}

jsFiddle

【讨论】：