javascript - 单击链接文本时，jQuery 函数(事件)event.target.id 为空

Question

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

我写了一个函数来操作菜单/面板，它部分起作用了。但是，我试图根据 event.target.id 确定要加载的内容(因为该函数采用 event)，但只有当我非常接近链接正方形的边缘。当我在 h1 和 h6 并且没有 id 的实际文本附近单击时，它不起作用。

现场演示(单击“样式”方 block 边缘附近，然后单击中间):http://jsfiddle.net/mANuD/

<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>

我该如何解决/改进这个问题，这样我点击链接区域的哪个位置就无关紧要了？

Answer 1

将 event.target.id 更改为 event.currentTarget.id 或 this.id。

event.target 始终是点击的最深元素，而 event.currentTarget 或 this 将指向处理程序所指向的元素已绑定(bind)，或绑定(bind)到委托(delegate)选择器匹配的元素。