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

示范

修改您不拥有的对象的原型通常是不受欢迎的，但这种更改是相当无害和自然的。

Answer 2

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

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

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