javascript jQuery - target.href 与 <a href="#"><img></a>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8535218/
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
jQuery - target.href with <a href="#"><img></a>
提问by Joakim Engstrom
I have an a ajax method that hiHymans every link in the HTML and preventDefaultand then loads the loadPagefunction().
我有一个 ajax 方法，它劫持 HTML 中的每个链接preventDefault，然后加载loadPagefunction()。
The method works on all other links that does not have a <img>inside. But when a <a>has a <img>inside the method clickEvent.target.hrefdoes not seem to work.
该方法适用于没有<img>内部的所有其他链接。但是当一个里面<a>有一个<img>方法clickEvent.target.href似乎不起作用。
The var urlin this instance returns undefined in the console, but on any other links it returns the href.
该var url在这种情况下返回undefined在控制台中，但在其他环节则返回href。
I'm guessing there is something wrong with I use the target method in this instance?
我猜我在这种情况下使用目标方法有问题吗？
$('#container a').click(function(clickEvent){
var url = clickEvent.target.href;
if(url.match(urlWebServer)) {
clickEvent.preventDefault();
loadPage(url);
}
});
<div id="user_img">
<a href="somepage.html"><img src="img_user/self.jpg" class="self" /></a>
</div>
回答by Alessandro Vendruscolo
Yes, you shouldn't use the clickEvent.targetbecause is the target that was clicked. In your case the target isn't the abut is the imgit contains.
是的，你不应该使用clickEvent.target因为是被点击的目标。在您的情况下，目标不是 ，a而是img它包含的。
Events in fact bubble up, so you click the image and the clickevent propagates to the top (up to the a) and triggers the event delegate you provided.
事件实际上是冒泡的，因此您单击图像，click事件会传播到顶部（直到a）并触发您提供的事件委托。
The solution is to change that line to
解决方案是将该行更改为
var url = this.href;
Or if you prefer to get the value through jQuery use
或者，如果您更喜欢通过 jQuery 获取值，请使用
var url = $(this).attr('href');
The first one is faster.
第一个更快。
The solution is that thisin the handler refers to the DOM element you attach the handler to. So thiswill refer to the a.
解决方案是this在处理程序中引用您将处理程序附加到的 DOM 元素。所以this将参考a.
回答by daan
If you use jQuery to select and bind, why not use jQuery for the rest of your action?
如果您使用 jQuery 来选择和绑定，为什么不使用 jQuery 来完成您的其余操作？
$('#container a').click(function(event){
var url = $(this).attr('href');
if(url.match(urlWebServer)) {
event.preventDefault();
loadPage(url);
}
});
回答by Graham
That's because clickEvent.targetrefers to the element which received the click, not the element to which the event listener was attached. Use thisinstead, which corresponds to the correct element.
这是因为clickEvent.target指的是接收点击的元素，而不是事件侦听器所附加到的元素。使用this代替，它对应于正确的元素。
var url = this.href;
var url = this.href;
Also note that you don't need to do $(this).propor $(this).attr; you can safely access the .hrefproperty of an anchor element without needing to create another jQuery instance and call another method.
另请注意，您不需要执行$(this).prop或$(this).attr；您可以安全地访问.href锚元素的属性，而无需创建另一个 jQuery 实例并调用另一个方法。
回答by Ilia G
The targetis the actual element that event was triggered on, which can be any of the children of the element you attached it to.
的target是实际的元素事件被触发时，它可以是任何你连接它的元素的孩子。
Use thisto reference the link instead.
使用this来引用链接。
var url = $(this).prop("href");
