Question

我试图在每个标签上放一个听众＆＃34; a＆＃34;。这里的例子是：http://fiddle.jshell.net/w5unvaxt/

＆＃13;

function callback(e) {
    var e = window.e || e;
/*
    if (e.target.tagName !== 'A')
        return;
*/
       
    alert('The link is: ' + e.target.href);
}

if (document.addEventListener){
    document.addEventListener('click', function (event) {
        event.preventDefault();
        callback(event);
    });
}else{
    document.attachEvent('onclick', function (event) {
        event.preventDefault();
        callback(event);
    });
}

＆＃13;

<!-- Works -->    
<a href="http://www.example.com">my text</a>

<!-- not works -->
<a href="http://www.example.com">    
    <div>my div</div>
</a>

＆＃13;

第一个例子很好但不是第二个。我该如何解决这个问题？

Answer 1

您的代码无效的原因是因为点击的目标元素是div而不是a。这意味着e.target.href的{{1}}为undefined。

在普通JS中使用事件委托非常困难。只要查看small library that accomplishes kinda what you want的源代码，我就可以看到它遍历目标，如果目标与指定的内容不匹配，则会将div分配给target。

我建议使用像我链接的小库（或事件jQuery！）。

您可以使用event delegation。

事件委托允许您避免向特定节点添加事件侦听器;相反，事件监听器被添加到一个父级。该事件监听器分析冒泡事件以找到子元素的匹配。

以下是关于how event delegation works的文章。

以下是我在普通JS中使用事件委托的示例。

＆＃13;

target.parentNode

＆＃13;

// Get the parent DIV, add click listener...
document.body.addEventListener("click", function(e) {
	// e.target was the clicked element
	if(e.target && e.target.nodeName == "A") {
		alert(e.target.innerText);
	}
});

＆＃13;

这样，您只需将事件侦听器附加到父级。

在每个链接上添加事件侦听器

1 个答案: