如何通过元素类名获取点击元素ID（尽量不使用jQuery）

没问题，我来帮你搞定这个需求！既然你不想依赖jQuery，也没法修改现有HTML结构或添加onclick属性，用原生JS的事件委托就能完美解决。

核心思路 #

利用事件委托机制，给整个文档绑定点击事件，当点击事件触发时，判断实际点击的元素是否是目标类（.my_class）的元素，再获取它的ID即可。这种方式不仅支持现有元素，后续动态添加的.my_class元素也能生效。

基础实现代码 #

document.addEventListener('click', function(e) {
  // 判断点击的元素是否包含目标类
  if (e.target.classList.contains('my_class')) {
    const clickedId = e.target.id;
    console.log(clickedId + " ...");
  }
});

更健壮的版本（支持子元素点击） #

如果你的.my_class元素内部还有其他子元素（比如<p id='123' class='my_class'><span>x</span></p>），点击子元素时也想拿到父元素的ID，可以用closest()方法来匹配最近的目标元素：

document.addEventListener('click', function(e) {
  // 找到最近的包含.my_class类的元素（包括自身）
  const targetElement = e.target.closest('.my_class');
  if (targetElement) {
    const clickedId = targetElement.id;
    console.log(clickedId + " ...");
  }
});

顺便说下你原来jQuery代码的问题 #

你之前写的$(document).on('click', '.my_class', this.id, function (id) { ... })参数有误：第三个参数并不是用来传递ID的，回调函数的第一个参数是事件对象，你需要通过$(this).attr('id')或者event.target.id来获取ID。不过既然你不想用jQuery，咱们就专注原生方案啦～

内容的提问来源于stack exchange，提问作者Timmy