javascript - jQuery - target.href 与 <a href ="#"><img></a>

Question

我有一个 ajax 方法可以劫持 HTML 和 preventDefault 中的每个链接。然后加载 loadPage函数()。

该方法适用于所有其他没有 <img> 的链接里面。但是当 <a>有一个 <img>方法内部 clickEvent.target.href似乎不起作用。

var url在这种情况下，在控制台中返回 undefined，但在任何其他链接上它返回 href .

我猜我在这种情况下使用目标方法有问题吗？

$('#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>

Answer 1

是的，您不应该使用 clickEvent.target，因为它是被点击的目标。在您的情况下，目标不是a，而是它包含的img。

事件实际上是向上冒泡的，因此您单击图像，click 事件传播到顶部(直到 a)并触发您提供的事件委托(delegate)。

解决方案是将该行更改为

var url = this.href;

或者如果您更喜欢通过 jQuery 使用获取值

var url = $(this).attr('href');

第一个更快。

解决方案是处理程序中的 this 引用您将处理程序附加到的 DOM 元素。所以 this 将引用 a。