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

Question

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

该方法适用于内部没有<img>的所有其他链接。但是，当<a>的方法中包含<img>时，clickEvent.target.href似乎不起作用。

此实例中的var url在控制台中返回undefined，但在任何其他链接上都返回href。

我猜我在这个例子中使用target方法有问题吧？

$('#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)，并触发您提供的事件委托。

解决方案是将该行更改为

var url = this.href;

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

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

第一个更快。

解决方案是处理程序中的this引用将处理程序附加到的DOM元素。因此，this将引用a。

Answer 2

如果您使用jQuery来选择和绑定，为什么不使用jQuery来完成剩下的操作呢？

$('#container a').click(function(event){
     var url = $(this).attr('href');
     if(url.match(urlWebServer)) {
                 event.preventDefault();
                 loadPage(url);
     }
});

Answer 3

这是因为clickEvent.target引用的是接收到单击的元素，而不是事件侦听器附加到的元素。请改用this，它与正确的元素相对应。

var url = this.href;

还要注意，您不需要执行$(this).prop或$(this).attr；您可以安全地访问锚元素的.href属性，而无需创建另一个jQuery实例并调用另一个方法。