Alpine.js中@click事件如何获取绑定事件的a标签元素ID

你的判断完全正确：$event.target 指向的是实际触发点击事件的最深层DOM节点，当你点击到a标签内部的p标签或者文字内容时，target对应的是p元素甚至文本节点，这些节点没有设置id属性，自然会返回undefined。
另外你的原始代码存在一个语法问题：a标签的开始标签没有写闭合的>，会导致DOM解析异常，修复时需要一并补上。

方案1：用event.currentTarget替代event.target（最直接） #

event.currentTarget 会始终指向绑定了当前事件监听器的元素，也就是你写了@click指令的a标签，不会因为点击子元素发生指向变化，修改后代码如下：

<a id="day-{{$index+1}}"
  @click="console.log($event.currentTarget.getAttribute('id'))">
  <p class="uppercase font-Lato">
    Day {{$index+1}}
  </p>
</a>

方案2：Vue场景直接传值（最推荐） #

从代码的@click、{{$index}}写法能看出你用的是Vue框架，这种场景完全不需要从event对象上取id，可以直接把需要的id值作为参数传给点击处理方法，从根源上避免事件指向问题，代码可维护性更高：

<a id="day-{{$index+1}}"
  @click="handleDayClick($index + 1)">
  <p class="uppercase font-Lato">
    Day {{$index+1}}
  </p>
</a>

对应在组件methods中定义处理逻辑：

methods: {
  handleDayClick(daySequence) {
    const targetId = `day-${daySequence}`
    console.log(targetId)
    // 后续业务逻辑直接使用targetId即可
  }
}

方案3：通过closest向上查找目标元素 #

如果是事件委托等无法直接拿到绑定元素的场景，可以用DOM原生的closest()方法，从点击的节点开始向上遍历，找到匹配对应选择器的最近祖先元素：

<a id="day-{{$index+1}}"
  @click="console.log($event.target.closest('a').id)">
  <p class="uppercase font-Lato">
    Day {{$index+1}}
  </p>
</a>

该方法可以兼容所有现代浏览器，不需要额外写循环遍历的逻辑。

按照HTML标准，a标签默认是行内元素，不允许直接嵌套p这类块级元素，虽然多数浏览器会做容错渲染，但可能引发意外的样式错乱、事件冒泡异常问题。建议要么把a标签通过CSS设置为display: block后再嵌套块级元素，要么把内部的p标签替换为span这类行内元素。

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