单击链接文本时,jquery函数(event)event.target.id为空

Question

我有一个侧面菜单,当点击时滑出以显示内容面板.基于单击的菜单项,我显然需要在面板中填充不同的东西.

我写了一个功能来操作菜单/面板,它部分工作.但是,我正在尝试确定要加载的内容event.target.id(如函数所示event),但是当我非常靠近链接方块的边缘时它只有一个值.当我点击实际文本附近h1,h6并且没有id,它不起作用.

现场演示(点击'Styles'广场边缘,然后在中间):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将指向到该处理程序被绑定,或者该委托选择器相匹配的元素的元素.