10

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

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

现场演示（单击“样式”正方形的边缘附近，然后单击中间）：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>

如何修复/改进此问题，以便我单击链接区域的哪个位置无关紧要？

4

2 回答 2

23

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

event.target总是单击最深的元素，而orevent.currentTarget将this指向处理程序绑定到的元素，或者指向委托选择器匹配的元素。

于 2013-03-29T09:22:36.480 回答
3

听起来某些后代元素上有边框或填充，event.target处理程序（有效）连接到的元素的后代也是如此。

两种选择：

  1. 用于this.id获取id处理程序（有效）绑定到的元素。这通常可以满足您的要求。更新小提琴

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

于 2013-03-29T09:23:33.760 回答