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

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

---

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

---

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

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

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

---

당신이 사용할 수있는

event.button

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

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

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

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

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

또한 읽으십시오

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

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

---

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

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

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

func() {
    alert("middle button clicked")
}

JavaScript에서 수행 addEventListener하려면 다음 요소로 이동하십시오.

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

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

---

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

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

---

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

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

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

FF 및 Chrome에서 작업

---

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.

---

적절한 방법은, 사용하는 .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');
});

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

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

If you still need to track the middle click using event delegation, the only way around as stated in the corresponding jQuery ticket, is to use mousedown or mouseup instead. Like so:

This works for delegated middle clicks:

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

See it online here.

참고URL : https://stackoverflow.com/questions/1795734/triggering-onclick-event-using-middle-click