2013-11-09 53 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。