Question

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

有多个选择器，如

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

，如何确定实际点击了哪个选择器？我需要像$(clicked_element)...一样使用它。

感谢。

Answer 1

使用$（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) { ... });

Answer 2

触发事件的元素在函数$(this)中可用，即

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

您还可以使用is()进行测试以确定元素是否与特定选择器匹配：

if ($(this).is('a.button'))) { ... }

Answer 3

我同意Patrick和Dexter关于如果这些元素具有不同功能的分离。但是，如果您打算使用此方法，请尝试使用一些内置的JavaScript方法。我不知道HTML标记是什么样的，但假设这个标记，你可以尝试下面的脚本：

<a class="button" href="http://somesite.com">Some Site</a>
<span class="xyz">span</span>
<a class="another" href="/topics/topic2.html">Topic 2</a>

$('a.button, span.xyz, a.another').click(function(e) {
   var clicked = 'a.another';
   if (this.tagName == "SPAN") { clicked = 'span.xyz'; }
   if (this.href.match('somesite')) { clicked = 'a.button'; }
   // Do something
});

多个选择器：识别触发器？

3 个答案: