JS .preventDefault无效

Question

当我在链接上使用.preventDefault时，它仍然会转到链接 - 这甚至可以用JS来实现，还是仅仅是jquery方法？

var avoidlink = getElementsByTagName("a");

avoidlink.addEventListner("click",function(evt){
evt.preventDefault();
},false);


<a href="http://www.google.com">Click here</a>

Answer 1

三个问题：

必须在文档或元素上调用
• getElementsByTagName
• 您无法直接在getElementsByTagName返回的节点列表上添加事件侦听器，您必须迭代它包含的元素：
• addEventListener
中有拼写错误

这是一个固定的代码：

var avoidlink = document.getElementsByTagName("a");
for (var i=0; i<avoidlink.length; i++) {
  avoidlink[i].addEventListener("click",function(evt){
  evt.preventDefault();
  },false);
}

---

如果您希望能够将事件监听器附加到节点列表，则可以丰富NodeList.prototype：

NodeList.prototype.addEventListener = function(){
  for (var i=0; i<this.length; i++) {
      Element.prototype.addEventListener.apply(this[i] , arguments);
  }
}

Demonstration

修改你不拥有的物体的原型通常是不受欢迎的，但这种变化是相当无害和自然的。

Answer 2

通常，如果许多元素需要相同的事件侦听器，您可以将事件侦听器添加到容器中，并过滤掉您想要采取操作的元素：

document.addEventListener("click",function(e){
  if(e.target,e.target.tagName.toLowerCase()==="a"){
    e.preventDefault();
  }
});

如果您要通过脚本添加额外的锚标记，它们也会触发preventDefault。