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도 트리거합니다.