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）并触发你提供的事件代理。

解决方案是将该行更改为

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;您可以安全地访问anchor元素的.href属性，而无需创建另一个jQuery实例并调用另一个方法。

Answer 4

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

使用this代替链接。

var url = $(this).prop("href");

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

4 个答案: