2013-11-09 107 views
0

当我在链接上使用.preventDefault时,它仍会进入链接 - 这是甚至可以用JS实现的,还是仅仅是一个jQuery的方法?JS .preventDefault无法正常工作

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

Demonstration

修改你不属于自己的物体的原型通常是不被接受的,但这种改变是相当无害和自然的。

0

通常,如果许多内容需要在同一个事件侦听器可以将事件侦听器添加到容器中,并筛选出你想借此在行动什么元素:

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

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