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是处理程序（有效）连接的元素的后代。

两个选项：

使用this.id获取处理程序（有效）绑定到的元素的id。这通常会做你想要的。 Updated Fiddle
在这种情况下，我认为你不需要它，但工具包中另一个方便的工具是closest，它通过查看你给出的元素找到匹配选择器的第一个元素它，然后它的父，然后它的父，等等。例如，$(this).closest(".item").attr("id")或$(event.target).closest(".item").attr("id")（因为你想要的项目有item）。 Updated Fiddle但同样，我相信在这种情况下你想要的是＃1。

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

2 个答案: