jQuery -目标.href & lt; a href =“#“祝辞& lt; img> & lt; / a>

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

本文关键字：lt href img 祝辞 jQuery 目标      更新时间：2023-09-26

我有一个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>

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

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

解决方案是将该行改为

var url = this.href;

或者，如果您希望通过jQuery获取值，请使用

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

第一个更快。

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

如果您使用jQuery来选择和绑定，为什么不使用jQuery来完成其他操作呢?

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

这是因为clickEvent.target指的是接收点击的元素，而不是事件侦听器附加到的元素。请使用this，它对应于正确的元素。

var url = this.href;

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

target是事件被触发的实际元素，它可以是您附加到的元素的任何子元素。

使用this来引用链接。

var url = $(this).prop("href");
相关文章：