Question

我正在构建一个可折叠的列表，并且在我尝试优化我的代码时，我发现自己制造了一些可以解决错误的东西，但是由于某种原因仍然会以某种方式工作。

function addEvent(element, myEvent, fnc) {
return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
}

var list = document.getElementById('list');
var items = list.getElementsByTagName('ul');
var items2 = list.getElementsByTagName('li');

for(var i = 0; len = items.length, i < len ; i++){

    items[i].parentNode.setAttribute('class','collapse');

    addEvent(items[i].parentNode, 'click', function(event) {

        event = event || window.event;

        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);

        if(this.getAttribute('class')==='collapse'){
            this.setAttribute('class','expand');
        } else {
            this.removeAttribute('class');
            var temp = this;
            setTimeout(function(){
                temp.setAttribute('class','collapse');
            },200);
        }

    });
}

我的修正尝试：http://jsfiddle.net/3pmcrqmj/1/

function addEvent(element, myEvent, fnc) {
return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
}

var list = document.getElementById('list');
var items = list.getElementsByTagName('ul');
var items2 = list.getElementsByTagName('li');

for(var i = 0; len = items.length, i < len ; i++){
    items[i].parentNode.setAttribute('class','collapse');
}

addEvent(list, 'click', function(event) {
    for(var i = 0; len = items.length, i < len ; i++){
        event = event || window.event;

        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);

        if(event.target.getAttribute('class')==='collapse'){
            event.target.setAttribute('class','expand');
            target.setAttribute('class','expand');
        } else {
            event.target.setAttribute('class','collapse');
            target.setAttribute('class','collapse');
        }
    }
});

如何正确地对此进行冒泡，以便我不必在每个列表项上插入事件监听器？

Answer 1

重写处理程序，检查点击元素的nodeName（== li）和子<li> - 元素的存在，因此它只对这些元素起作用：

addEvent(list, 'click', function (e) {
     e = e || window.event;
     var from = e.target || e.srcElement;
     if (!/^li$/i.test(from.nodeName) ||
         !from.querySelectorAll('li').length) {return true;}
     var expand = /collapse/i.test(from.className || '');
     from.setAttribute('class', expand ? 'expand' : 'collapse');
});

这是您重写的jsFiddle

纯js中的可折叠列表优化

1 个答案: