用于现有onclick事件的Javascript IE8包装器

时间:2013-07-09 12:53:32

标签: javascript javascript-events event-handling

我必须在原始的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语句为true后触发的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功能就在它上面。
有人可以帮我解决这个问题吗?

由于

2 个答案:

答案 0 :(得分: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}

后者看起来对您尝试实现的目标更有用,因为使用它仍具有原始范围,您不必重新eval使用{Function代码1}}。

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

答案 1 :(得分:1)

这将执行您想要的操作,首先执行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