Javascript 单击链接文本时，jquery函数（event）event.target.id为空

我有一个侧菜单，当点击时，它会滑出一个内容面板。根据单击的菜单项，我显然需要在面板中填充不同的内容

我写了一个操作菜单/面板的函数，它部分工作。但是，我试图根据

event.target.id

（函数采用

event

）确定要加载的内容，但它只有在非常靠近链接正方形的边缘单击时才有值。当我在实际文本附近单击时，该文本是

h1

和

h6

，并且没有

id

，它不起作用

现场演示（单击“样式”正方形边缘附近，然后单击中间）：

---

如何修复/改进此问题，使其与我在链接区域中单击的位置无关？

将

event.target.id

更改为

event.currentTarget.id

或

this.id

---

event.target

始终是单击最深的元素，而

event.currentTarget

或

此

将指向处理程序绑定到的元素，或委托选择器匹配的元素。

听起来有些子元素上有边框或填充，因此，

event.target

是处理程序（有效地）连接到的元素的后代

两种选择：

使用

this.id

获取处理程序（有效）绑定到的元素的

id

。这通常是你想要的

我认为在这种情况下不需要它，但工具箱中另一个方便的工具是

最近的

，它通过查看您给它的元素，然后是它的父元素，然后是它的父元素，等等来查找与选择器匹配的第一个元素。因此，例如，

$（this）.最近的（.item”）.attr（“id”）

或

$（event.target）.closest（“.item”）.attr（“id”）

（因为您想要的项具有class

项

）。但我再次相信，在这种情况下，1就是你想要的

---

始终在问题本身中包含相关的标记和代码，而不仅仅是链接（即使是到JSFIDLE，尽管这是一个不错的加号）。为什么：只需将

e.target.id

更改为

this.id

，即可使用绑定元素的id而不是目标。

<div id="application-frame">
  <div class="panel"></div>
  <ul id="slide-out-menu">
    <li>
      <a href="#" class="item" id="styles-menu">
        <h1>S</h1>
        <h6>Styles</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="designers-menu">
        <h1>D</h1>
        <h6>Designers</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="code-menu">
        <h1>C</h1>
        <h6>Code</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="help-menu">
        <h1>?</h1>
        <h6>Help</h6>
      </a>
    </li>
  </ul>
</div>