Question

我正在尝试添加一个用于点击的事件监听器，我想知道被点击的节点的位置

function evl(etna) {
    document.addEventListener("click", function (el) {
        alert("You clicked on " + 'the name of element that was clicked or his array code');
    }, false);
};

其中etna是：

document.getElementsByTagName("*");

Answer 1

function evl(etna){
    document.addEventListener("click",function (el) {
        var clickedElement = el.target || el.srcElement;
        alert("Link detected a click. Cancellable: "+clickedElement.name);
        for(var i = 0; i < etna.length; i++) {
            if(etna[i] === clickedElement) {
                //i is a position of an element in etna
                break;
            }
        }
      },false);
};

~~你可以使用this指向一个被点击的元素。~~至于Phil H IE 8不能那样工作。但无论如何，应该使用.target或.srcElement。也许最好得到它的身份。 Name属性对div，span等无效

但您也要将事件附加到document。这将指向一份文件。而不应该使用el.target || el.srcElement，其中.target/.srcElement是指向实际发生点击的节点的指针。

另外，我认为你不能得到document.getElementsByTagName("*")返回的数组中的元素索引（实际上是节点列表）（好吧，你可以获取该列表并在循环中迭代它并检查每个元素是否它等于this）。另外，我不知道为什么需要它。

Answer 2

添加一个循环，并为etna数组中的每个项目设置不同的事件监听器：

function evl(etna){
    for(var i=0; i < etna.length; ++i) {
        (function() {
            var thisNode = etna[i];
            var localval = i;
            etna[i].addEventListener("click",function (el) {
                alert("Link detected a click. Cancellable: "+ thisNode.id + " which is id " + localval );
            },false);
        })();
    }
}

工作jsfiddle：http://jsfiddle.net/5xDjE/

立即调用的函数仅仅是强制thisNode和localval的作用域，否则所有元素都会引用同一个变量（javascript作用域很有趣）。

我建议不要使用索引（通过localval作用域），因为它需要保留原始的节点数组。由于节点随着时间的推移而变化，并且javascript确实为您引用计数，因此您希望避免使用这类长节点。

请注意this并不总是包含点击的元素，在IE8及this points to the global window object下方。

检测子节点号

2 个答案: