중간 클릭을 사용하여 onclick 이벤트 트리거

onclick해시 링크 이벤트를 사용하여를 <div>팝업 으로 엽니 다 . 그러나 중간 클릭은 onclick이벤트를 트리거하지 않고href 링크 의 속성 값만 가져와 새 페이지에 URL을로드합니다. 중간 클릭을 사용 <div>하여 팝업 으로 열려면 어떻게해야합니까?

편집하다

이 답변은 더 이상 사용되지 않으며 Chrome에서 작동하지 않습니다 . 아마도 auxlink 이벤트를 사용하게 될 것이지만 아래의 다른 답변을 참조하십시오.

/편집하다

beggs의 대답은 정확하지만 중간 클릭의 기본 동작을 방지하려는 것 같습니다. 이 경우 다음을 포함하십시오.

$("#foo").on('click', function(e) {
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

preventDefault () 는 이벤트의 기본 동작을 중지합니다.

가운데 클릭 / 마우스 휠 버튼이 감지 되려면 이벤트를 사용해야합니다 auxclick. 예 :

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

그런 다음 스크립트 파일에서

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

있습니다 (HTML 속성을 사용하지 않고 자바 스크립트에서 작업을 수행하려는 경우 onauxclick당신은 다음) addEventListener요소에 :

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
})

<a id="myLink" href="http://example.com">middle click me</a>

여기서auxclick 이벤트 에 대한 mdn 페이지를 확인 하십시오 .

당신이 사용할 수있는

event.button

클릭 한 마우스 버튼을 식별합니다.

상태가 변경된 버튼을 나타내는 정수 값을 반환합니다.

• 표준 '클릭'의 경우 0, 일반적으로 왼쪽 버튼
• 중간 버튼의 경우 1, 일반적으로 휠 클릭
• 오른쪽 버튼의 경우 2, 일반적으로 오른쪽 클릭

Internet Explorer에서는이 규칙을 따르지 않습니다. 자세한 내용은 QuirksMode를 참조하십시오.

포인팅 장치가 구성된 방식에 따라 버튼 순서가 다를 수 있습니다.

또한 읽으십시오

어떤 마우스 버튼을 클릭 했습니까?

어떤 마우스 버튼이 클릭되었는지 알아내는 데는 두 가지 속성이 있습니다 : which 및 button. 이러한 속성이 클릭 이벤트에서 항상 작동하는 것은 아닙니다. 마우스 버튼을 안전하게 감지하려면 mousedown 또는 mouseup 이벤트를 사용해야합니다.

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});

<a id="foo" href="http://example.com">middle click me</a>

나는 보통 사람들이 해결책 대신 대안을 제시하는 것을 싫어하지만 이미 해결책이 제공 되었기 때문에 나는 내 자신의 규칙을 어길 것입니다.

중간 클릭 기능이 무시되는 웹 사이트는 나를 정말 괴롭히는 경향이 있습니다. 현재 콘텐츠를 가리지 않고 새 탭에서 새 콘텐츠를 열고 싶기 때문에 일반적으로 가운데 클릭합니다. 중간 클릭 기능은 그대로두고 클릭 한 요소의 HREF 속성을 통해 관련 콘텐츠를 제공 할 수있을 때마다 그게해야 할 일이라고 강력히 믿습니다.

jQuery는 .which클릭 버튼 ID를 왼쪽에서 오른쪽으로 1, 2, 3으로 제공하는 이벤트에 대한 속성을 제공합니다.이 경우 2를 원합니다.

용법:

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
}); 

Adamantium의 답변도 작동하지만 IE는 다음과 같이주의해야합니다.

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

또한 .button속성은 .which.

이 질문은 약간 오래되었지만 해결책을 찾았습니다.

$(window).on('mousedown', function(e) {
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Chrome이 마우스 휠에 대해 "클릭"이벤트를 실행하지 않음

FF 및 Chrome에서 작업

적절한 방법은, 사용하는 .on바와 같이, .live중단 된 후 제거 jQuery를 보낸 사람 :

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

또는 "실시간"느낌을 원하고 #foo문서 시작 페이지에없는 경우 :

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

원래 답변

파티에 늦었다는 것을 알고 있지만 여전히 중간 클릭을 처리하는 데 문제가있는 경우 이벤트를 위임했는지 확인하십시오. 위임의 click경우 이벤트가 발생하지 않습니다. 비교:

이것은 중간 클릭에서 작동합니다.

$('a').on('click', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

중간 클릭에는 작동하지 않습니다.

$('div').on('click', 'a', function(){
  alert('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

이벤트 위임을 사용하여 중간 클릭을 추적해야하는 경우 해당 jQuery 티켓에 명시된 유일한 방법 은 mousedown또는 mouseup대신 사용하는 것입니다. 이렇게 :

이것은 위임 된 중간 클릭에 대해 작동합니다.

$('div').on('mouseup', 'a', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

여기에서 온라인으로 확인하십시오 .