Question

我正在使用 Javascript 动态创建一些锚<a>标记。每当用户点击其中一个链接时，我希望标签的背景颜色发生变化。

我正在动态创建<a>链接：

var link = document.createElement("a");
link.href = newstr;
var linktext = document.createTextNode(count);
link.appendChild(linktext);

我使用以下方式获取页面上的所有链接：

document.onclick=function() {
    var a_array = document.getElementsByTagName("a");
    console.log(a_array.length);
}

这给了我链接的总数，但我想知道哪个元素被点击了。我尝试过使用this关键字，但确实得到了想要的信息。我想我错了。

我不想要使用 jQuery 。

定位当前点击的链接的任何替代代码也会有所帮助。

Answer 1

您似乎尝试使用event delegation（在文档级别分配点击处理程序）。在这种情况下，您需要知道点击源自何处。 event是你的朋友：

document.onclick = function(e) {
    e = e || event;
    var from = e.target || e.srcElement;
    if (/a/i.test(from.tagName)) {
        from.style.backgroundColor = 'red';
    }
}

~~jQuery的委托方式是~~：删除，OP不需要jQuery。他/她may be right

这是一个j sFiddle，有更多代码确实证明了事件委托的有用性

Answer 2

使用以下方法检测a代码点击：

var tags = document.getElementsByTagName("a");

for(var i = 0; i < tags.length; i++) {
    tags[i].onclick = function() {
        this.style.backgroundColor = 'red';
        return false;   
    }
}

Demo

Answer 3

由于您的帖子上有jQuery标记，因此可以使用的替代解决方案是：

JS：

$('body').on('click', 'a', function(){
   $(this).css('background','red');
});

Answer 4

如果op动态创建链接，即：

var a = document.createElement('a');

然后他需要做的就是在那一点设置链接处理程序：

var a = document.createElement('a');
a.onclick = function()
{
  this.style.backgroundColor = "red";
  return false; //stop the click from navigating somewhere.
}
a.href = newstr;

将为所有动态创建的链接添加相同的处理程序 - 就在他创建链接的位置。

这是他需要识别哪些链接的问题 - 如果它是所有链接，那么他可能必须getElementsByTagName，以及动态链接的上述代码。

在单击事件上更改动态创建的锚标记的颜色

4 个答案: