Question

最近这里的好人帮我提供了一些JavaScript，这些JavaScript发布在下面。但是，它似乎与网站上已存在的另一个功能相冲突。由于我是一名后端程序员并且对JavaScript知之甚少，有没有人知道如何解决冲突？

function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        var divs = document.getElementsByClassName('hide');
        var showElement = true;
        if (divid.style.display === 'block') {
            showElement = false;
        }
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.display = 'none';
        }
        if (showElement) {
            divid.style.display = 'block';
        }
    }
    return false;
}

上面的代码与以下内容冲突，后者是CAPTCHA的重新加载图标。没有错误，但只要其他代码存在，刷新就不会执行任何操作。请注意，上面的代码包含在网站范围内，并在其他几个页面上使用，而下面的代码仅用于其中一个。

<img src="/common/quickcaptcha/imagebuilder.php" border="1" id="verification">
<a href="#" onclick="document.getElementById('verification').src='/common/quickcaptcha/imagebuilder.php?img=' + Math.random(); return false">
  <img src="/common/images/refreshicon.gif" width="22" height="22" border="0" title="Refresh Security Code">
</a>

Answer 1

当您使用该语法（.on{event} = ...）设置事件侦听器时，您将覆盖该事件的任何先前设置的侦听器。例如：

window.onload = function(){ console.log("A"); }; // Won't be executed
window.onload = function(){ console.log("B"); };

相反，您应该添加一个事件监听器，而不会影响其他人：

// Both of these will be executed
window.addEventListener('load', function(){ console.log("A"); });
window.addEventListener('load', function(){ console.log("B"); });

Answer 2

您可以对所有事件使用相同的逻辑：

//function that already exists
window.onload = function () {
    console.log("A");
}

//method to add multiple functions at "event" on a element (windows is default)
var addOn = function (event, func, element) {
    if (!element) {
        element = window;
    }

    if (element.addEventListener) {
        element.addEventListener(event, func);
    }
    else if (element.attachEvent) {
        element.attachEvent('on' + event, func);
    }
    else {
        var onevent = element['on' + event];

        element['on' + event] = function () {
            if (onevent) {
                onevent();
            }

            func();
        }
    }
}

//closure
var addOnLoad = function (func, element) {
    addOn('load', func, element);
}

//adding more new functions at onload
addOnLoad(function () {
    console.log("B");
});

addOnLoad(function () {
    console.log("C");
});

<!DOCTYPE html>
<html>
<body>
    <img src="http://www.web1marketing.com/resources/tools/quickcaptcha/imagebuilder.php" border="1" id="verification" />

    <br />

    <a href="#" onclick="document.getElementById('verification').src = 'http://www.web1marketing.com/resources/tools/quickcaptcha/imagebuilder.php?img=' + Math.random(); ">
        <img src="http://kinneygroup.com/wp-content/themes/Kinney-new/images/loading_arrows.gif" width="22" height="22" border="0" title="Refresh Security Code" />
    </a>


    <div class="hide" style="display: none;">element hidden</div>

    <script>
        //method to add multiple functions at "event" on a element (windows is default)
        var addOn = function (event, func, element) {
            if (!element) {
                element = window;
            }

            if (element.addEventListener) {
                element.addEventListener(event, func);
            }
            else if (element.attachEvent) {
                element.attachEvent('on' + event, func);
            }
            else {
                var onevent = element['on' + event];

                element['on' + event] = function () {
                    if (onevent) {
                        onevent();
                    }

                    func();
                }
            }
        }

        //closure
        var addOnLoad = function (func, element) {
            addOn('load', func, element);
        }

        //closure
        var addOnClick = function (func, element) {
            addOn('click', func, element);
        }


        function showhide(obj, divs) {
            var showFlag = true;

            if (obj.style.display === 'block') {
                showFlag = false;
            }
            for (let i = 0, max = divs.length; i < max; i++) {
                divs[i].style.display = 'none';
            }

            if (showFlag) {
                obj.style.display = 'block';
            }
        }

        addOnLoad(function () {
            var d = document;
            var anchors = d.getElementsByTagName("a");
            var divs = d.getElementsByClassName("hide");

            for (let i = 0, len = anchors.length; i < len; i++) {
                addOnClick(function () {
                    let e = divs[i];
                    showhide(e, divs);
                }, anchors[i]);
            }
        });
    </script>
</body>
</html>

功能冲突

2 个答案: