jQuery函数(event) event.target.id在点击链接文本时为空

Question

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

我写了一个函数来操作菜单/面板，它部分工作。然而，我试图确定基于event.target.id加载什么(因为函数需要event)，但它只有在我点击非常接近链接方形的边缘时才有一个值。当我点击实际文本附近的h1和h6，没有id的，它不工作。

现场演示(点击"样式"方块边缘附近，然后在中间):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将指向处理程序绑定到的元素，或者指向委托选择器匹配的元素。

Answer 2

这听起来像是在一些后代元素上有边框或填充，所以event.target是处理程序(有效)连接的元素的后代。

两个选择:

1. 使用this.id获取处理程序(有效)绑定到的元素的id。这通常是你想要的。更新小提琴

2. 我不认为你在这种情况下需要它，但工具箱中的另一个方便的工具是closest，它通过查看你给它的元素找到匹配选择器的第一个元素，然后是它的父元素，然后是它的父元素，等等。例如，$(this).closest(".item").attr("id")或$(event.target).closest(".item").attr("id")(因为您想要的项目具有item类)。但是，我再次相信#1是你在这种情况下想要的。