javascript - 如何使只有具有 id 的元素可点击？

Question

每个 div 都是可点击的 (JavaScript)。

如何使得只有具有 id 的元素可点击，而具有 class 的元素不可点击？

是否有替代选项:

var div = document.getElementsByTagName ("div"); 

与

var div = document.getElementsByClassName ("div");

我尝试过，但没有成功

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {

  div[i].onclick = function(e) {

    clickedDivId = this.id;
    event.stopPropagation();
    alert(this.id);

  };
}

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.parentclass {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

.childclass {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

Answer 1

这是一个解决方案，其中处理具有现有属性 id 的元素的点击。您可以在 JS 代码中添加 else 部分来处理所有其他点击的 div。

var div = document.getElementsByTagName("div");
var divCount = div.length;

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        if (e.target.id) alert(this.id);
        e.stopPropagation();
    };
}   

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.parentclass {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

.childclass {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

这是一个简短的 JS 代码:

var div = document.getElementsByTagName("div");

[...div].forEach( (el) => {
    el.onclick = function(e) {
            e.stopPropagation();
            e.target.id &&  alert(this.id);
        }
});