javascript - 多个选择器 : identify the triggering one?

这是我无法弄清楚的一个非常小的问题。我相信有人可以立即回答:

有多个选择器，如

$('a.button, span.xyz, a.another').click(function(e) {
   var clicked_element = ???;
});

，我怎样才能找出实际点击了哪个选择器？我需要像 $(clicked_element)... 一样使用它。

谢谢。

最佳答案

使用 $(this) 可以获得被点击的元素。使用 is() 可以帮助你确定点击了什么。

$('a.button, span.xyz, a.another').click(function(e) {
  if ($(this).is("a.button")) {
    alert("a.button was clicked");
  } else if ($(this).is("span.xyz")) {
    alert("span.xyz was clicked");
  } else if ($(this).is("a.another")) {
    alert("a.another was clicked");
  }
});

编辑:
当我写下这个答案时，似乎有更好的方法。 Patrick DW 的评论引起了我的兴趣，我想知道更多。他的澄清在这里 jQuery - Issues with combining selectors in a single event handler
这将是一个更好的方法

$("a.button").click(function(e) { ... });
$("span.xyz").click(function(e) { ... });
$("a.another").click(function(e) { ... });

据我了解，如果您的目标是将通用功能放在一个地方，那么应该如何处理

function commonFunctionality(elementSelector) {
  // common code for all elements here or at the end

  switch (elementSelector) {
    case "a.button":
      //do stuff for a.button only;
      break;
    case "span.xyz":
      //do stuff for span.xyz only;
      break;
    case "a.another":
      //do stuff for a.another only;
      break;
  }

  // common code for all elements
}


$("a.button").click(function(e) { ... });
$("span.xyz").click(function(e) { ... });
$("a.another").click(function(e) { ... });