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>답변
당신이 사용할 수있는
클릭 한 마우스 버튼을 식별합니다.
상태가 변경된 버튼을 나타내는 정수 값을 반환합니다.
- 표준 ‘클릭’의 경우 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");
}
});
