jquery - jquery .on() 方法 - 访问正确的页面元素

Question

我在页面中有这个 html：

<div id="page-container">
    <a class="myLink" href="http://www.example.com/">
    <span></span>
    </a>
</div>

这个jQuery：

$('body').on('click','#page-container a', function(e){

   alert(e.target);

}

这个CSS：

a span {
    display: block;
    height: 36px;
    width: 36px;
    background-color: #eee;
    border: 2px solid #000;
    padding: 2px;
}

我需要访问href“ http://www.example.com/ ”并想使用e.target。但这会返回 span 对象。我也试过 $(this).attr(href)。如何使用 .on() 方法访问 href？

异常示例：http: //jsfiddle.net/guRXt/1/

Answer 1

使用e.currentTarget而不是e.target. 如果<a>标签内有多个节点，您会看到使用哪个特定节点单击e.target，而e.currentTarget会告诉您使用哪个对象处理了事件。

如果您需要该href属性，请使用$(e.currentTarget).attr("href").

Answer 2

利用：

$(function(){
    $('#page-container').on('click','a', function(e){
        e.preventDefault();
        alert($(this).attr('href'));
    })                    
});

检查这个工作 jsFiddle。您还必须使用e.preventDefault();，这样点击不会自动将您带到 href。

Answer 3

e.target是触发事件的元素；this是事件绑定的元素。它们并不总是相同的。您点击了<span>，这就是“目标”。 this将永远是<a>。

$('body').on('click','#page-container a', function(e){
    alert(this.href);
});