开发者问题收集

JS .preventDefault 不起作用

2013-11-09
822
javascript html preventdefault

当我在链接上使用 .preventDefault 时，它仍然会转到该链接 - 这是否也可以通过 JS 实现，还是说这是仅限 jquery 的方法？ 

var avoidlink = getElementsByTagName("a");

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


<a href="http://www.google.com">Click here</a>
2个回答

三个问题：

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

演示

修改对象的原型不拥有通常会被反对，但这种改变却是无害且自然的。

Denys Séguret
2013-11-09

通常，如果许多元素需要相同的事件监听器，您可以将事件监听器添加到容器并过滤出您想要对其采取行动的元素： 

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

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

HMR
2013-11-09