最可靠方式是给父容器绑定事件并用 array.from(images).indexof(e.target) 获取索引；也可用 data-index 属性直接存储，或用 findindex 匹配唯一属性。
在 JavaScript 中，用 event.target 获取被点击图片的索引，关键不是直接从 target 身上“读出”索引，而是通过它与图片列表的关系来推导索引。最可靠、通用的方式是：**给所有图片绑定事件监听器（或委托），再结合 DOM 位置或自定义属性定位索引**。
用 Array.from().indexOf() 定位真实索引
如果图片是静态渲染的一组 <img> 元素（比如在 <div id="gallery"> 中），推荐为父容器统一监听，再比对 target 是否为其中一张图：
<font color="#666">
<pre class="brush:php;toolbar:false;">const gallery = document.getElementById('gallery');
const images = gallery.querySelectorAll('img');
gallery.addEventListener('click', (e) => {
if (e.target.tagName === 'IMG') {
const index = Array.from(images).indexOf(e.target);
console.log('点击了第', index, '张图'); // 0 起始
}
});</pre>
</font>
<p>✅ 优点：不依赖 HTML 结构变化，不修改 DOM，兼容性好；<br>⚠️ 注意：确保 <code>e.target 是原生 <img>（不是内部子元素如 <span></span>）；若需支持点击图片内文字/图标，可用 e.target.closest('img') 替代。
用自定义 data 属性存索引（简单直接）
适合图片数量固定、可预知的场景。HTML 中显式写入索引：
@@##@@ @@##@@ @@##@@
JS 中直接读取：
document.querySelectorAll('img').forEach(img => {
img.addEventListener('click', e => {
const index = Number(e.target.dataset.index);
console.log('索引：', index);
});
});
✅ 简单清晰，语义明确；
⚠️ 需确保 data-index 始终与实际顺序一致，动态增删图片时需同步维护。
用 Array.prototype.findIndex() 匹配唯一标识
当图片有唯一特征（如 src、alt 或 ID），又不想改 HTML，可按属性查找：
const images = document.querySelectorAll('img');
const allSrcs = Array.from(images).map(img => img.src);
gallery.addEventListener('click', e => {
if (e.target.tagName === 'IMG') {
const index = allSrcs.indexOf(e.target.src);
console.log('索引：', index);
}
});
⚠️ 注意：src 可能是相对路径或含查询参数，建议用 e.target.currentSrc 或先归一化处理；重复图片 URL 会导致匹配错误，慎用于有重复图的场景。
避免常见误区
-
别用
e.target.index或e.target.id直接当索引 ——index不是标准属性，id是字符串且不等于数字索引 -
不要依赖
e.target.parentElement.children下标 —— 若父元素含其他节点（空格文本、注释、其他标签），children和视觉顺序可能不一致 -
事件委托时慎用
e.target未校验 —— 点击图片边框、空白处或子元素会返回非IMG，必须加类型判断
