容器绑定点击事件，点击同尺寸子元素时触发对象为子元素的问题

这是事件触发机制里的常见小坑——当你点击容器内的img时，实际触发事件的原始元素是img，所以event.target会指向它，而非绑定事件的div。不过有几个简单实用的办法可以解决这个问题：

方法1：使用event.currentTarget（推荐） #

event.currentTarget是专门用来指向绑定事件处理函数的元素的，不管你点击的是容器本身还是它的任意子元素，它都会精准指向绑定了onclick的div。记得要把event作为参数传递到函数里（避免依赖全局event变量，这是更规范的写法）：

<div onclick='toggle_class(event)'>
  <img src='source_img'/>
</div>
<script>
function toggle_class(event){
  // currentTarget 始终指向绑定了onclick的div
  event.currentTarget.classList.add('open');
}
</script>

方法2：直接获取目标容器元素 #

如果你的容器有唯一标识（比如id），可以直接在函数里获取它，不用依赖事件对象：

<div id="my-container" onclick='toggle_class()'>
  <img src='source_img'/>
</div>
<script>
function toggle_class(){
  document.getElementById('my-container').classList.add('open');
}
</script>

这个方法适合单个容器的场景，但如果页面中有多个重复的同类容器，就不如方法1灵活。

方法3：向上查找父元素（适配复杂DOM结构） #

如果你的DOM层级比较深，不确定子元素的嵌套情况，可以通过closest()方法从点击的元素向上查找最近的目标容器：

<div class="container" onclick='toggle_class(event)'>
  <div class="inner-wrap">
    <img src='source_img'/>
  </div>
</div>
<script>
function toggle_class(event){
  // 找到最近的带container类的父元素
  const container = event.target.closest('.container');
  if(container) {
    container.classList.add('open');
  }
}
</script>

这个方法在多层嵌套的DOM结构里很实用，能确保你找到正确的容器元素。

总结一下，最简洁通用的方案是方法1，用event.currentTarget直接指向绑定事件的元素，既不用修改DOM结构，也能适配各种子元素嵌套的情况。

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