文档迭代:我应该说明哪些问题？

Question

(function( d, w ){

    function showClimb( e ){
        var t = e.target;
        console.log( t.id );
        while( t.id !== 'document-body' ){
            t = t.parentNode;
            console.log( t.id );
        }
    }

    d.body.addEventListener( 'click', showClimb, false );

}( document, window ))

我只是编写了这个片段来测试是否选择了一个元素或它的子元素。这种方法有哪些风险？我应该包括哪些故障保存，以确保这个循环不会以某种方式被卡住？我正在为IE9及更高级别写作。

Answer 1

总之，我首先会担心变量名:D d、w和t。进来的人会说：“这是什么巫术？”

现在，t.id并不是一个保证。并非所有元素都可能具有id属性。你爬上去时可能会遇到空隙。尝试用element.tagName填充它。

接下来是你的硬编码document-body。似乎document-body是特定于您的代码。失去它将意味着无限的攀登。为什么不和document比较一下，用一种更有保障的方式达到顶峰呢？

这是我对它的看法。不是最理想的，而是做同样的事情。

function climb(element) {
  var elementName = element.id || element.tagName;
  return element === document ? [elementName] : climb(element.parentNode).concat(elementName);
}

document.body.addEventListener('click', function(e) {
  console.log(climb(e.target).join(' <- '));
}, false);

<a href="#" id="test">test</a>