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'));
    })                    
});

检查此working jsFiddle。您还必须使用e.preventDefault();，因此点击不会自动转到href。

Answer 3

e.target是触发事件的元素; this是事件绑定的元素。它们并不总是一样的。您点击了<span>，这就是“目标”。 this始终为<a>。

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

jquery .on（）方法 - 访问正确的页面元素

3 个答案: