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

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

사용 중입니다.onclicka를 열기 위한 해시 링크 이벤트<div>불쑥그러나 중간 클릭은 이벤트를 트리거하지 않고 다음만 수행합니다.href링크의 속성 값을 입력하고 새 페이지에 URL을 로드합니다.중간 클릭을 사용하여 다음을 여는 방법은 무엇입니까?<div>팝업으로?

편집

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

/편집

---

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 속성을 사용하지 않고 JavaScript에서 수행하려는 경우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>

에 대한 mdn 페이지를 확인합니다.auxclick여기 이벤트.

사용할 수 있습니다.

이벤트 버튼

클릭한 마우스 단추를 식별합니다.

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

• 표준 '클릭'의 경우 0(일반적으로 왼쪽 버튼)
• 중간 버튼의 경우 1(일반적으로 휠 클릭)
• 오른쪽 단추의 경우 2(일반적으로 마우스 오른쪽 단추 클릭)

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

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

또한 읽기

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

클릭한 마우스 단추를 확인할 수 있는 속성에는 두 가지가 있습니다.이러한 속성이 클릭 이벤트에서만 작동하는 것은 아닙니다.마우스 버튼을 안전하게 감지하려면 마우스다운 또는 마우스업 이벤트를 사용해야 합니다.

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

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

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

$(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>

크롬이 마우스 휠에 대해 "클릭" 이벤트를 발생시키지 않음

FF 및 Chrome에서 작업

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

중간 클릭 기능이 무시되는 웹 사이트는 정말로 저를 괴롭히는 경향이 있습니다.현재 내용을 방해받지 않고 볼 수 있는 상태에서 새 탭에서 새 내용을 열고 싶기 때문에 보통 중간 클릭을 합니다.중간 클릭 기능을 그대로 두고 클릭한 요소의 HREF 속성을 통해 관련 콘텐츠를 사용할 수 있도록 할 수 있을 때마다 그렇게 해야 한다고 생각합니다.

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

용도:

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

아다만티움의 대답도 효과가 있겠지만 IE를 주의해야 합니다.

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

또한기십시오하억▁the오시▁remember를 기억하세요..button는 " 1-자가아 0-자니다"처럼 이 아닌 입니다..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');
});

<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>

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

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