首页 > 编程语言> > javascript-未设置onclick事件

javascript-未设置onclick事件

2019-11-23 02:36:09 作者：互联网

function main() {
    workMenu("leftVerticalMenu");
}

function log(obj) {
    console.log(obj);
}

function workMenu(id) {
    var menuContainer = document.getElementById(id).children[0];
    closeListsNodes(menuContainer);
}

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");

    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul");

        for (var j = 0; j < need.length; j++) {
            need[j].style.display = "none";
            need[j].id = i.toString() + j.toString();
            need[j].onclick = function () {
                hideshow(need[j].id);
            };
        }
    }
}

function hideshow(id) {
    var need = document.getElementById(id);

    if (need.style.display == 'none') {
        need.style.display = 'block';
    } else {
        need.style.display = 'none';
    }

}

此代码以最小化方式创建列表并输入ID.但是代码不会将onclick事件处理程序添加到html页面.我尝试使用代码示例,但无法正常工作.不使用jQuery如何实现？

<body onl oad="main();">
    <div id="leftVerticalMenu">
        <ul>
            <li>
                <a href="#">item 1</a>
                <ul>
                    <li>
                        <a href="#">item 11</a>
                        <ul>
                            <li>
                                <a href="#">item 111</a>
                            </li>
                            <li>
                                <a href="#">item 112</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">item 12</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">item 2</a>
                <ul>
                    <li>
                        <a href="#">item 21</a>
                    </li>
                    <li>
                        <a href="#">item 22</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

解决方法:

该解决方案仅使用一个循环.如果列表项< li>元素不包含任何子元素< ul>列表,它将停止事件传播并防止折叠已扩展的菜单(现在它也与IE8 / 7兼容)：

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");
    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul")[0];
        if (need === undefined) {
            object[i].onclick = function(e){
                e = e||window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true; // for IE8/7 compatibility, http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/
                }
            }
            continue;
        }
        need.style.display = "none";
        need.id = 'list'+i;
        object[i].onclick = (function (need) {
            return function(e){
                hideshow(need.id,e);
            };
        })(need); // create closure here to remember/pass the correct element to hideshow()
    }
}

function hideshow(id, e) {
    e = e||window.event; // for IE8/7
    var need = document.getElementById(id);
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true; // for IE8/7
    }
    if (need.style.display == 'none') {
        need.style.display = 'block';
    } else {
        need.style.display = 'none';
    }
}

http://jsfiddle.net/krTXh/4/(代码)
http://jsfiddle.net/krTXh/4/show(结果)

标签：event-handling,onclick,html,javascript
来源： https://codeday.me/bug/20191123/2064382.html