멋진 링크로 일관된 브라우저 간 동작을 얻으십시오.

Question

일부 링크로 약간 이상하게 작동하는 사이트를 개발 중입니다.

사용자가 링크를 클릭하면 링크 옆에 this처럼 보이는 표시기 GIF가 나타나고 링크 자체가 비활성화됩니다. 그런 다음 페이지로 이동합니다. 이는 참을성이없는 사용자가 즉시로드하지 않으면 반복적으로 링크를 클릭하여 서버에 추가로드가 발생할 수 있다는 우려 때문입니다.

<a id="link1" href="/target_page" 
    onclick="var link = document.getElementById('link1'); 
      var loc = link.href; 
      link.removeAttribute('href'); 
      link.setAttribute('onclick', 'return false;'); 
      document.getElementById('link1_img').style.display=''; 
      window.location = loc;"> 
    Link Text 
    <img id="link1_img" src="/images/indicator.gif" style="display:none;" /> 
</a> 

가 여기에 문제의 : 여기

우리가이 작업을 수행하는 방법이다. 사용자가 링크를 정상적으로 클릭하거나 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴의 새 창이나 탭에서 열면 예상되는 동작을하지만 사용자가 중간 클릭하거나 Ctrl + 링크를 클릭하십시오.

그런 경우 원하는 동작은 모든 자바 스크립트를 건너 뛰고 새 탭에서 링크를 여는 것입니다. 필자는 각 주요 브라우저의 최신 버전을 사용하여 Windows에서 빠른 테스트를 수행했으며 IE, Firefox 및 Opera가 모두이 작업을 수행했습니다. 그러나 Chrome과 Safari는 표시기를 표시하고 현재 탭에 링크를 엽니 다.

모든 브라우저에서 일관되게 동작하도록하는 방법에 대한 제안 사항이 있으십니까?

Answer 1

중간 클릭을 처리하는 데 the code here을 사용할 수 있으며 Ctrl + 클릭으로 here을 볼 수 있습니다. 그러나 클릭 수 대신 중간 클릭 수 (적어도 Firefox에서는)에 대해 .mousedown을 사용해야한다는 것을 알았습니다. 당신이

$('#link').click(function(e) { 
    if(e.ctrlKey && e.which == 1 || e.which == 2) { // Ctrl + Click 
     console.log("hi"); 
     $(this).css('color','#aaa'); 
     $(this).click(function(e) { e.preventDefault(); }); 
    } 
}); 

을 사용하고 e.preventDefault()을 추가하지 않으면 예상대로

, 그것은 작동합니다. Firefox, Chrome 및 IE9에서 저에게 적합합니다.

편집 : jQuery가 없으면이 방법을 사용할 수 있습니다. 하지만 this post 약 preventDefault() 대 return false;,보십시오.

document.querySelector('#link').onclick = function(e) { 
    this.style.color = '#aaa'; 
    disableLink(this); 
} 

// middle clicks only captured in mousedown 
document.querySelector('#link').onmousedown = function(e) { 
    this.style.color = '#aaa'; 
    if (e.button == 1) { 
     disableLink(this); 
    } 
} 

function disableLink(elem) { 
    elem.onclick = function(e) { console.log("HI"); this.href = '#'; return false;} 
    elem.onmousedown = function(e) { console.log("HI"); this.href = '#'; return false;} 
} 

불행히도 Chrome과 Firefox에서 중간 클릭을 처리하는 방식에는 차이가있는 것처럼 보입니다. Firefox는 중간 클릭을 onmousedown에만 표시하고 onmousedown 중에는 새 탭을 엽니 다. 이것은 Firefox의 경우 onmousedown 후에 링크를 비활성화해야 함을 의미합니다. 그러나 Chrome에서는 가운데 클릭이 onmousedown 및 onclick으로 표시되지만 링크는 onclick 이후에만 열립니다. 우리는 mousedown에있는 링크를 사용하지 않도록 때문에, onclick 결코 :(실행할 수있는 기회를 얻을 수 없습니다.

하지 않음이 문제를 해결하는 방법을 잘 ...