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

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

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

现场演示（点击“样式”广场边缘，然后在中间点击）： http ： //jsfiddle.net/mANuD/

 
 
 
 
  
S
 
Styles
  
 
  
D
 
Designers
  
 
  
C
 
Code
  
 
  
?
 
Help
  
 
  

如何修复/改进这一点，以便在我点击链接区域的哪个位置无关紧要？

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。