하여 addEventListener은

Question

내가 이런 몇 앵커 요소 productions에 루프하여 addEventListener를 추가 '클릭' 모든 XHR 페칭을 수행 한 후 기본 앵커 링크를 따릅니다.

function production_e()는 "생산"이 클릭되었는지 테스트 한 다음 생산의 설명이 포함되어 있는지 확인합니다. 그렇지 않은 경우 XHR을 시작하여 설명을 검색하고 프로덕션 요소에 삽입합니다.

function production_e(e) { 
    e.preventDefault(); 
    if(!current_show) { 
    current_show = this; 
    if(!this.getElementsByClassName('production_description')[0]) 
     get_production_article(this,show_description); 
    } 
} 

get_production_article = function(production,callback) { 
    var req = new XMLHttpRequest(); 
    req.onreadystatechange = function(e) { 
     if(req.readyState === 4 && req.status === 200) { 
      install_article(production,req.responseText); 
      callback(production); 
     } 
    } 
    var pl = production.getElementsByClassName('production-link')[0]; 
    req.open('GET',pl.href + '-article',true); 
    req.send(); 
} 

install_article 함수는 소자를 노출 스타일을 설정하고 DOM show_description 콜백 함수에서 responseText에 삽입한다.

그러나 을 사용하면 왼쪽 마우스 클릭이 모든 동일한 작업을 수행하는 것처럼 보이지만 다른 페이지의 기본 앵커 링크를 따라갑니다. 흥미롭게도 마우스 오른쪽 버튼을 클릭하면 왼쪽 마우스 클릭을 수행 할 것으로 예상됩니다.

어떻게 든 preventDefault() 함수가 통과하지 않거나 다시 트리거되지만 그 일이 어떻게 발생하는지 알 수 없습니다. 내가 뭘 놓치고 있니?

Answer 1

글쎄, mousedown 기본값을 막지 않아도 click 이벤트가 발생하는 것을 막을 수는 없으며 기본 설정도 그대로 유지됩니다. 기본 click 동작을 방지하려면 클릭 이벤트도 수신해야합니다.

Answer 2

저는 보통 자바 스크립트를 실행하지 않는 사람들을위한 옵션을 남기지 않는 한 XHR을 수행하는 링크를 피하려고합니다. 필요한 경우 버튼을 사용하여 링크 스타일을 지정하고 XHR에 사용할 정보에 대해 data-xxx 속성을 설정할 수 있습니다.

<button data-article="id0123" type="button" >Article 123</button> 

는 다음을 사용할 수 있습니다 http://codepen.io/pituki/pen/gtCus