如何只制作具有可点击 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

您可以通过 class 像这样 select：

const idSet = document.querySelectorAll('#a');
const classSet = document.querySelectorAll('.a');

const log = t => () => console.log(t);

idSet.forEach(element => element.onclick = log('id click'))
classSet.forEach(element => element.onclick = log('class click'))

<button id="a">1</button>
<button class="a">2</button>
<button class="a">2</button>

Answer 2

这是一个解决方案，其中处理对具有现有属性 id 的元素的点击。您可以将 else 部分添加到 JS 代码以处理所有其他单击的 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);
        }
});

Answer 3

您可以 select 所有具有这样 id 的元素：

document.querySelectorAll('[id]');

然后您可以为您的点击使用事件侦听器。

    const clickableIds = document.querySelectorAll('[id]');
    clickableIds.forEach(element => {
      element.addEventListener('click', () => {
          alert('Here is your element object: ' + element);
      });
    });

    #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 4

除了用 document.querySelectorAll('div[id]') 明显替换 getElementsByTagName 到仅具有 id 属性的 select div 元素之外，我建议将此委托事件并处理监听器中的 id 部分。这样只有一个处理函数，它可以处理稍后在 DOM 中添加/修改的元素。

document.body.addEventListener( 'click', e => {
   const { id } = e.target;
     if( id ){
        console.log( id );
     }
});

演示：https://jsfiddle.net/85ob2vqg/

或者在 ES5 中

document.body.addEventListener( 'click', function(e){
   var  target = e.target;
     if( target.id ){
        console.log( target.id );
     }
});

如何只制作具有可点击 ID 的元素？

How to make only elements which have ids clickable?

javascript

class

click