자바 스크립트 이벤트를 마우스 오른쪽 버튼으로 클릭합니까?

자바 스크립트 이벤트를 마우스 오른쪽 버튼으로 클릭합니까? 그렇다면 어떻게 사용합니까?

다른 사람들이 언급했듯이 오른쪽 마우스 버튼은 일반적인 마우스 이벤트 (mousedown, mouseup, click)를 통해 감지 할 수 있습니다 . 그러나 오른쪽 클릭 메뉴가 표시 될 때 발사 이벤트를 찾으려면 잘못된 위치를 찾고있는 것입니다. 오른쪽 클릭 / 컨텍스트 메뉴는 키보드 (Windows 및 일부 Linux의 경우 Shift + F10 또는 컨텍스트 메뉴 키)를 통해 액세스 할 수도 있습니다. 이 상황에서 찾고있는 이벤트는 oncontextmenu다음과 같습니다.

window.oncontextmenu = function ()
{
    showCustomMenu();
    return false;     // cancel default menu
}

마우스 이벤트 자체는 브라우저가 이벤트 처리 기능에서 액세스 할 수있는 이벤트 객체로 속성을 설정합니다.

document.body.onclick = function (e) {
    var isRightMB;
    e = e || window.event;

    if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
        isRightMB = e.which == 3; 
    else if ("button" in e)  // IE, Opera 
        isRightMB = e.button == 2; 

    alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
} 

window.oncontextmenu-MDC

다음 jQuery 코드를 살펴보십시오.

$("#myId").mousedown(function(ev){
      if(ev.which == 3)
      {
            alert("Right mouse button clicked on element with id myId");
      }
});

의 가치 which는 다음과 같습니다.

• 왼쪽 버튼의 경우 1
• 중간 버튼의 경우 2
• 오른쪽 버튼은 3

다음과 같은 이벤트를 사용할 수 있습니다 window.oncontextmenu.

window.oncontextmenu = function () {
  alert('Right Click')
}

<h1>Please Right Click here!</h1>

w3c는 오른쪽 클릭이 클릭 이벤트에 의해 감지 될 수 있다고 말하지만 onClick은 일반적인 브라우저에서 오른쪽 클릭을 통해 트리거되지 않습니다.

실제로 마우스 오른쪽 버튼을 클릭하면 onMouseDown onMouseUp 및 onContextMenu 만 트리거됩니다.

따라서 "onContextMenu"를 오른쪽 클릭 이벤트로 간주 할 수 있습니다. HTML5.0 표준입니다.

마우스 오른쪽 버튼 클릭을 감지하려면 MouseEvent.which속성이 표준이 아니므로 브라우저간에 비 호환성이 있으므로 속성을 사용하면 안됩니다 . ( MDN 참조 ) 대신 사용해야 MouseEvent.button합니다. 주어진 버튼을 나타내는 숫자를 반환합니다.

• 0: 메인 버튼, 보통 왼쪽 버튼 또는 초기화되지 않은 상태
• 1: 보조 버튼 누름, 일반적으로 휠 버튼 또는 중간 버튼 (있는 경우)
• 2: 보조 버튼을 눌렀으며 일반적으로 오른쪽 버튼
• 3: 네 번째 버튼, 일반적으로 브라우저 뒤로 버튼
• 4: 다섯 번째 버튼, 일반적으로 브라우저 전달 버튼

MouseEvent.button 표준 마우스보다 더 많은 입력 유형을 처리합니다.

버튼은 표준 "왼쪽에서 오른쪽"레이아웃과 다르게 구성 될 수 있습니다. 왼손잡이 용으로 구성된 마우스는 버튼 동작이 반대로 될 수 있습니다. 일부 포인팅 장치에는 하나의 버튼 만 있고 키보드, 기타 입력 메커니즘을 사용하여 주, 보조, 보조 등을 나타냅니다. 다른 포인팅 장치에는 다른 기능과 버튼 값에 매핑 된 많은 버튼이있을 수 있습니다.

참고:

1. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
2. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

아니요, "onmousedown"이벤트에서 어떤 마우스 버튼이 사용되었는지 감지 할 수 있으며 "오른쪽 클릭"인지 확인할 수 있습니다.

다음 코드는 jQuery를 사용 rightclick하여 기본 mousedown및 이벤트를 기반으로 사용자 정의 이벤트 를 생성 mouseup합니다. 다음 사항을 고려합니다.

• 마우스 업시 트리거
• 전에 동일한 요소에서 마우스 다운을 눌렀을 때만 트리거
• 이 코드는 특히 JFX Webview에서도 작동합니다 ( contextmenu 이벤트가 트리거되지 않기 때문에)
• 키보드에서의 ContextMenu 키이 (가)와 솔루션처럼 (누를 때 트리거하지 않습니다 on('contextmenu', ...)않습니다

$(function ()
{ // global rightclick handler - trigger custom event "rightclick"
	var mouseDownElements = [];
	$(document).on('mousedown', '*', function(event)
	{
		if (event.which == 3)
		{
			mouseDownElements.push(this);
		}
	});
	$(document).on('mouseup', '*', function(event)
	{
		if (event.which == 3 && mouseDownElements.indexOf(this) >= 0)
		{
			$(this).trigger('rightclick');
		}
	});
	$(document).on('mouseup', function()
	{
		 mouseDownElements.length = 0;
	});
    // disable contextmenu
    $(document).on('contextmenu', function(event)
	{
		 event.preventDefault();
	});
});



// Usage:
$('#testButton').on('rightclick', function(event)
{
  alert('this was a rightclick');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testButton">Rightclick me</button>

예-그렇습니다!

function doSomething(e) {
    var rightclick;
    if (!e) var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert('Rightclick: ' + rightclick); // true or false
}

예, oncontextmenu가 가장 좋은 대안 일 수 있지만 마우스를 누르면 트리거되고 클릭하면 마우스를 올리면 트리거됩니다.

다른 관련 질문은 수동 타이머 확인을 제외하고는 지원되지 않는 두 번 클릭에 대한 질문이었습니다. 왼손잡이 마우스 입력 (버튼 반전)을 지원해야하는 경우 오른쪽 더블 클릭을 원할 수있는 이유 중 하나입니다. 브라우저 구현은 사용 가능한 입력 장치를 어떻게 사용해야하는지에 대해 많은 가정을하는 것 같습니다.

마우스 오른쪽 버튼을 클릭하는 가장 쉬운 방법은

 $('classx').on('contextmenu', function (event) {

 });

그러나 이것은 크로스 브라우저 솔루션이 아니며이 이벤트, 특히 firefox 및 IE에서 브라우저가 다르게 작동합니다. 크로스 브라우저 솔루션을 권장합니다.

$('classx').on('mousedown', function (event) {
    var keycode = ( event.keyCode ? event.keyCode : event.which );
    if (keycode === 3) {
       //your right click code goes here      
    }
});

이것이 가장 쉬운 방법이며 CefSharp Chromium 등과 같은 응용 프로그램 웹보기를 제외한 모든 브라우저에서 작동합니다. 내 코드가 도움이 되길 바랍니다.

const contentToRightClick=document.querySelector("div#contentToRightClick");

//const contentToRightClick=window; //If you want to add it into the whole document

contentToRightClick.oncontextmenu=function(e){
  e=(e||window.event);
  e.preventDefault();
  console.log(e);
  
  return false; //Remove it if you want to keep the default contextmenu 
}

div#contentToRightClick{
  background-color: #eee;
  border: 1px solid rgba(0,0,0,.2);
  overflow: hidden;
  padding: 20px;
  height: 150px;
}

<div id="contentToRightClick">Right click on the box !</div>

오른쪽 클릭 이벤트 동안 함수를 호출하려면 다음을 사용할 수 있습니다.

 <html lang="en" oncontextmenu="func(); return false;">
 </html>

<script>
function func(){
alert("Yes");
}
</script>

이것은 나와 함께 작동

if (evt.xa.which == 3) 
{
    alert("Right mouse clicked");
}

whichand / or button속성을 사용해보십시오

데모

function onClick(e) {
  if (e.which === 1 || e.button === 0) {
    console.log('Left mouse button at ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 2 || e.button === 1) {
    console.log('Middle mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 3 || e.button === 2) {
    console.log('Right mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 4 || e.button === 3) {
    console.log('Backward mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 5 || e.button === 4) {
    console.log('Forward mouse button ' + e.clientX + 'x' + e.clientY);
  }
}
window.addEventListener("mousedown", onClick);

여기에 몇 가지 정보

jQuery라이브러리를 사용하여 이벤트 처리

$(window).on("contextmenu", function(e)
{
   alert("Right click");
})

마우스 오른쪽 클릭을 처리하기 위해 'oncontextmenu'이벤트를 사용할 수 있습니다. 아래는 예입니다.

 document.body.oncontextmenu=function(event) {
     alert(" Right click! ");
 };

위의 코드는 마우스 오른쪽 버튼을 클릭하면 일부 텍스트를 경고합니다. 브라우저의 기본 메뉴를 표시하지 않으려면 return false를 추가 할 수 있습니다. 함수 내용의 끝에서. 감사.

예, 자바 스크립트 마우스 다운 이벤트입니다. jQuery 플러그인 도 있습니다.