javascript-未设置onclick事件

2019-11-23 02:36:09 阅读：205 来源： 互联网

标签：event-handling onclick html javascript

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-未设置onclick事件