Jquery Onclick并引用所单击的对象

我得到了下面的jQuery表达式，在函数中我需要一个对被单击对象的引用，有什么方法可以做到这一点吗

$('#tagList li').click(function() {
  /* contents */
});

---

使用

$（this）

是的，

this

关键字引用单击的DOM元素。您可以这样“包装”它：

$(this)

这将允许您将其视为jQuery对象。

This关键字就是您要查找的。通常，您会希望将jQuery函数应用于此以完成您的工作。例如：

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

---

您可以使用返回值

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

或者，如果需要，可以在jQuery模式下简单地指向对象

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

---

如果您是jQuery新手，我强烈建议您在中查看中的一些屏幕广播，了解一点jQuery的工作原理以及如何使用console.log（）来查看您可以使用的对象是非常好的

添加一个新答案，该答案将涵盖更多用例，特别是当您想要使用箭头函数时

还建议不要将JS单击添加到li元素。相反，您应该使用嵌套在此元素中的按钮或锚点（可单击的东西）

由于单击的元素可能是子元素，因此需要确保以正确的元素为目标

在我的示例中，我将把单击指定给li中的一个按钮及其上的一个类。标记将只是：

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

这可以确保您的目标是在其上注册单击的元素。如果按钮中有任何嵌套标记（如或），则事件目标可能是嵌套元素，而不是要将单击指定给的元素

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});