JavaScript：添加onClick处理程序而不覆盖现有处理程序 [英] JavaScript: Adding an onClick handler without overwriting the existing one

问题描述

我正在尝试修改页面上的所有链接，以便在点击它们时执行一些额外的工作。

I'm trying to modify all links on a page so they perform some additional work when they are clicked.

一个简单的方法可能是这样的：

A trivial approach might be something like this:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        links[i].onclick = function (e)
        {
            <do some work>
            return true;
        }
    }
}

但已有部分链接有一个应该保留的 onClick 处理程序。我尝试了以下方法：

But some of the links already have an onClick handler that should be preserved. I tried the following:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        var oldOnClick = links[i].onclick;
        links[i].onclick = function (e)
        {
            if(oldOnClick != null && !oldOnClick())
            {
                return false;
            }
            <do some work>
            return true;
        }
    }
}

但这不起作用因为 oldOnClick 仅在调用处理程序时进行评估（它包含 last 链接的值作为此点）。

But this doesn't work because oldOnClick is only evaluated when the handler is called (it contains the value of the last link as this point).

推荐答案

您需要创建一个闭包来保留每个链接的原始 onclick 值：

You need to create a closure to preserve the original onclick value of each link:

<a href="#" onclick="alert('hi');return false;">Hi</a>
<a href="#" onclick="alert('there');return true;">There</a>
<script type="text/javascript">
function adaptLinks() {
    var links = document.getElementsByTagName('a');
    for (i = 0; i != links.length; i++) {
        links[i].onclick = (function () {
            var origOnClick = links[i].onclick;
            return function (e) {
                if (origOnClick != null && !origOnClick()) {
                    return false;
                }
                // do new onclick handling only if
                // original onclick returns true
                alert('some work');
                return true;
            }
        })();
    }
}
adaptLinks();
</script>

请注意，如果原始onclick处理程序返回true，则此实现仅执行新的onclick处理。如果这是你想要的，那很好，但请记住，如果你想要执行新的onclick处理，即使原始处理程序返回false，你也必须稍微修改一下代码。

Note that this implementation only performs the new onclick handling if the original onclick handler returns true. That's fine if that's what you want, but keep in mind you'll have to modify the code slightly if you want to perform the new onclick handling even if the original handler returns false.

更多关于 comp.lang.javascript常见问题解答和< a href =http://www.crockford.com/javascript/private.html =noreferrer> Douglas Crockford 。

这篇关于JavaScript：添加onClick处理程序而不覆盖现有处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！