Next.js中如何让点击事件仅作用于Image组件本身而非父容器

方法1：点击事件目标校验（改造成本最低） #

在你现有的handleTags点击处理函数开头增加判断，仅当点击的目标元素是图片本身时，才执行业务逻辑：

const handleTags = (e) => {
  // 非图片元素点击直接跳过
  if (e.target.tagName.toLowerCase() !== 'img') return
  // 原有业务逻辑保留在下方
  // ...
}

这种方法不需要修改现有布局结构，代码改动最小，适配动态图片的场景也无需额外处理。

方法2：布局层适配图片比例（彻底消除空白区域） #

你目前的问题根源是：设置layout="fill" + objectFit="contain"后，图片会等比缩放适配父容器，导致父容器内出现上下/左右空白区域，绑定在父容器的点击事件自然会被空白区域的点击触发。
我们可以提前计算图片的宽高比，用padding占位的方式让容器尺寸和图片实际渲染尺寸完全一致，从根源上消除空白区域：

<div
  style={{ width: 600 }}
  className="image-item bg-gray-200 w-9/12 h-auto relative"
>
  {/* 按图片比例设置padding-top，例如600*300的图片比例为2:1，padding-top为50% = 300/600*100% */}
  <div
    onClick={(e) => handleTags(e)}
    ref={imageWrapRef}
    style={{
      position: 'relative',
      width: '100%',
      height: 0,
      paddingTop: '50%' // 动态图片的话可以替换为 图片高度/图片宽度*100% + '%'
    }}
  >
    <Image
      src={image["data_url"]}
      alt=""
      layout="fill"
      objectFit="contain"
    />
  </div>
</div>

如果是动态加载的未知比例图片，可以先加载图片拿到naturalWidth和naturalHeight计算比例后再赋值给paddingTop即可。

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