javascript - 使用纯JS找出点击了哪个DOM元素

Question

我有一个带有文本的 HTML 文档。我想要完成的是，当您单击 div 元素时，会显示该 div 的 id。

我试过这个:

window.onload = function() {
  associateIds();
  clicked();
}

function associateIds() {
  var all = document.getElementsByTagName("*");
  var id = -1;
  for (var elem = 0; elem < all.length; elem++) {
    if (all[elem].tagName == "DIV") {
      id++;
      all[elem].setAttribute("id", id);
    }
  }
}

function clicked() {
  document.body.onclick = function(evt) {
    var evt = window.event || evt; //window.event for IE
    if (!evt.target) {
      evt.target = evt.srcElement; //extend target property for IE
    }
    alert(evt.target.id);
  }
}

<div>
  <h1>MAIN TITLE</h1>
</div>

<div>
  <h2>Title</h2>
</div>

<div>
  <p>
    <strong>Alice</strong> was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it,<i> 'and what is the use of a book,'</i> thought
    Alice<i> 'without pictures or conversations?’</i>.
  </p>
</div>

<div>
  <p>
    So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a <strong>White Rabbit</strong> with
    pink eyes ran close by her. There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, <i>'Oh dear! Oh dear! 
			I shall be late!'</i> (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural). But when the <strong>Rabbit</strong> actually took a watch out of its waistcoat-pocket,
    and looked at it, and then hurried on, <strong>Alice</strong> started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran
    across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.
  </p>
</div>

<div>
  <p>
    Down, down, down. Would the fall never come to an end! <i>'I wonder how many miles I've fallen by this time?' she said aloud. 'I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—'</i> (for,
    you see, <strong>Alice</strong> had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice
    to say it over)<i> '—yes, that's about the right distance—but then I wonder what Latitude or Longitude I've got to?' </i>(Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say).
    <p>
</div>

但是当我点击一个 div 时，会发生以下情况:

在我的代码中，ID 不是静态分配的，而是通过函数 associateIds() 分配的。我已经验证该函数完成了它的工作:

ID 在那里，但当您单击时它们不会显示。

我更愿意使用纯 JavaScript，而不是 jQuery。

为什么会这样？我该如何解决？

Answer 1

添加 while 循环以获取父 div。

---

您必须添加parentNode，因为当您单击目标时，目标不是具有id 的div，而是 child 的某个人，所以您必须添加 parentNode 并循环遍历元素，直到获得具有 id 的父级 div，请参见以下代码:

function clicked() {
    document.body.onclick = function(evt) {
        var evt = window.event || evt; //window.event for IE
        if (!evt.target) {
            evt.target = evt.srcElement; //extend target property for IE
        } 

        var parent = evt.target.parentNode;

        while (parent.tagName != 'DIV') {
            parent = parent.parentNode;
        }
        alert(parent.id);
    }
}

Updated fiddle using closest()

或者你可以像这样使用closest():

function clicked() {
    document.body.onclick = function(evt) {
        var evt = window.event || evt; //window.event for IE
        if (!evt.target) {
            evt.target = evt.srcElement; //extend target property for IE
        } 

        var parent = evt.target.closest('div');

        alert(parent.id);
    }
}

希望这对您有所帮助。