Question

每个div都是可点击的（JavaScript）。

如何使其仅具有ID的元素可单击，而具有类的元素不可单击？

是否有替换选项：

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的元素的单击。您可以将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 2

除了将getElementsByTagName用document.querySelectorAll('div[id]')替换为仅选择具有div属性的id元素外，我建议委托此事件并处理{{ 1}}在侦听器中。这样，只有一个处理程序函数，它将与稍后可能在DOM中添加/修改的元素一起使用。

id

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

或者在ES5中

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

Answer 3

您可以按以下类别进行选择：

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 4

您可以选择具有以下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>

如何仅使具有ID的元素可点击？

4 个答案: