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