Javascript 获取触发 jquery 中的 onclick 事件的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6071095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the element triggering an onclick event in jquery?
提问by Max Williams
I have a form where i've replaced the submit button with an input (with type=button) with an onclick which calls an existing function:
我有一个表单，其中我将提交按钮替换为一个输入（带有 type=button）和一个调用现有函数的 onclick：
<form accept-charset="UTF-8" action="/admin/message_campaigns" class="new_message_campaign" id="new_message_campaign" method="post">
<!-- some fields -->
<input onclick="confirmSubmit();" type="button" value="Send" />
</form>
In the confirmSubmit, i'd like to be able to dynamically get the form object (to submit it), instead of having to hardcode the form's id, or pass it as part of the call to confirmSubmit(). I'd have thought that i could do this by first getting the dom element that was clicked on, ie something like this:
在confirmSubmit 中，我希望能够动态获取表单对象（以提交它），而不必对表单的id 进行硬编码，或者将其作为对confirmSubmit() 调用的一部分传递。我原以为我可以通过首先获取被点击的 dom 元素来做到这一点，即像这样：
var form = $(this).parents("form");
where $(this) is the object that called the function, ie the input with the onclick. This doesn't work though. I think it wouldwork if i'd set it up with the .click(function(){syntax. Can i get the element that called the function in a different way?
其中 $(this) 是调用函数的对象，即带有 onclick 的输入。但这不起作用。我认为如果我用语法设置它会起作用.click(function(){。我可以以不同的方式获取调用该函数的元素吗？
EDIT - got the answer from @claudio below, for clarity here's the complete function and call:
编辑 - 从下面的@claudio 得到答案，为了清楚起见，这里是完整的函数和调用：
<form accept-charset="UTF-8" action="/admin/message_campaigns" class="new_message_campaign" id="new_message_campaign" method="post">
<!-- some fields -->
<input onclick="confirmSubmit($(this));" type="button" value="Send" />
</form>
and the function itself. Note that 'jConfirm' is a method of the jquery-alerts plugin (http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/) but that's not really relevant to this question - the key thing was just to get the form object, not what's subsequently done with it:
和函数本身。请注意，'jConfirm' 是 jquery-alerts 插件（http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/）的一种方法，但这与这个问题并不真正相关 - 关键只是获取表单对象，而不是随后对其进行的操作：
function confirmSubmit(caller) {
var form = caller.parents("form");
jConfirm('Are you sure?', 'Please Confirm', function(result){
if (result) {
form.submit();
} else {
return false;
}
});
}
回答by Claudio
You can pass the inline handler the thiskeyword, obtaining the element which fired the event.
您可以将this关键字传递给内联处理程序，以获取触发事件的元素。
like,
喜欢，
onclick="confirmSubmit(this);"
回答by Coin_op
If you don't want to pass the clicked on element to the function through a parameter, then you need to access the event object that is happening, and get the target from that object. This is most easily done if you bind the click event like this:
如果您不想通过参数将点击的元素传递给函数，那么您需要访问正在发生的事件对象，并从该对象中获取目标。如果您像这样绑定点击事件，则最容易做到这一点：
$('#sendButton').click(function(e){
var SendButton = $(e.target);
var TheForm = SendButton.parents('form');
TheForm.submit();
return false;
});
回答by Ryan
Try this
尝试这个
<input onclick="confirmSubmit(event);" type="button" value="Send" />
Along with this
随着这
function confirmSubmit(event){
var domElement =$(event.target);
console.log(domElement.attr('type'));
}
I tried it in firefox, it prints the 'type' attribute of dom Element clicked. I guess you can then get the form via the parents() methods using this object.
我在 Firefox 中尝试过，它会打印单击的 dom 元素的“类型”属性。我想你可以通过使用这个对象的 parents() 方法来获取表单。
回答by JerzySkalski
It's top google stackoverflow question, but all answers are not jQuery related!
这是 google stackoverflow 的顶级问题，但所有答案都与 jQuery 无关！
$(".someclass").click(
function(event)
{
console.log(event, this);
}
);
'event' contains 2 important values:
'event' 包含 2 个重要值：
event.currentTarget- element to which event is triggered ('.someclass' element)
event.currentTarget- 触发事件的元素（'.someclass' 元素）
event.target- element clicked (in case when inside '.someclass' [div] are other elements and you clicked on of them)
event.target- 元素被点击（如果在 '.someclass' [div] 里面是其他元素并且你点击了它们）
this- is set to triggered element ('.someclass'), but it's JavaScript element, not jQuery element, so if you want to use some jQuery function on it, you must first change it to jQuery element: $(this)
this- 设置为触发元素（'.someclass'），但它是JavaScript元素，不是jQuery元素，所以如果你想在它上面使用一些jQuery函数，你必须先把它改成jQuery元素：$(this)
When your refresh the page and reload the scripts again; this method not work. You have to use jquery "unbind" method.
当您刷新页面并再次重新加载脚本时；这个方法不行。您必须使用 jquery 的“解除绑定”方法。
