Nhấp chuột phải vào một sự kiện Javascript?

Nhấp chuột phải vào một sự kiện Javascript? Nếu vậy, làm thế nào để tôi sử dụng nó?

Như những người khác đã đề cập, nút chuột phải có thể được phát hiện thông qua các sự kiện chuột thông thường (mousedown, mouseup, click) . Tuy nhiên, nếu bạn đang tìm kiếm một sự kiện khai hỏa khi menu chuột phải được đưa lên, bạn đang tìm sai chỗ. Menu chuột phải / ngữ cảnh cũng có thể truy cập thông qua bàn phím (shift + F10 hoặc phím menu ngữ cảnh trên Windows và một số Linux). Trong tình huống này, sự kiện mà bạn đang tìm kiếm là oncontextmenu:

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

Đối với chính các sự kiện chuột, trình duyệt đặt thuộc tính cho đối tượng sự kiện có thể truy cập được từ chức năng xử lý sự kiện:

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

hãy xem mã jQuery sau đây:

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

Giá trị của which sẽ là:

• 1 cho nút bên trái
• 2 cho nút giữa
• 3 cho nút bên phải

Bạn có thể sử dụng sự kiện này window.oncontextmenu, ví dụ:

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

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

Ya, mặc dù w3c nói rằng nhấp chuột phải có thể được phát hiện bởi sự kiện nhấp chuột, onClick không được kích hoạt thông qua nhấp chuột phải trong các trình duyệt thông thường.

Trong thực tế, nhấp chuột phải chỉ kích hoạt onMouseDown onMouseUp và onContextMothy.

Vì vậy, bạn có thể coi "onContextMothy" là sự kiện nhấp chuột phải. Đó là một tiêu chuẩn HTML5.0.

Nếu bạn muốn phát hiện nhấp chuột phải, bạn không nên sử dụng thuộc MouseEvent.whichtính vì nó không chuẩn và có sự không tương thích lớn giữa các trình duyệt. (xem MDN ) Thay vào đó, bạn nên sử dụng MouseEvent.button. Nó trả về một số đại diện cho một nút cho trước:

• 0: Nhấn nút chính, thường là nút bên trái hoặc trạng thái chưa khởi tạo
• 1: Nhấn nút phụ, thường là nút bánh xe hoặc nút giữa (nếu có)
• 2: Nhấn nút phụ, thường là nút bên phải
• 3: Nút thứ tư, thường là nút Quay lại trình duyệt
• 4: Nút thứ năm, thường là nút Chuyển tiếp trình duyệt

MouseEvent.button xử lý nhiều loại đầu vào hơn là chuột tiêu chuẩn:

Các nút có thể được cấu hình khác với bố cục "trái sang phải" tiêu chuẩn. Một con chuột được cấu hình để sử dụng thuận tay trái có thể có các hành động nút đảo ngược. Một số thiết bị trỏ chỉ có một nút và sử dụng bàn phím hoặc các cơ chế nhập khác để biểu thị chính, phụ, phụ, v.v. Những thiết bị khác có thể có nhiều nút được ánh xạ tới các chức năng và giá trị nút khác nhau.

Tài liệu tham khảo:

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

Không, nhưng bạn có thể phát hiện nút chuột nào đã được sử dụng trong sự kiện "onmousedown" ... và từ đó xác định xem đó có phải là "nhấp chuột phải" hay không.

Đoạn mã sau đang sử dụng jQuery để tạo rightclicksự kiện tùy chỉnh dựa trên mặc định mousedownvà mouseupsự kiện. Nó xem xét các điểm sau:

• kích hoạt trên mouseup
• chỉ kích hoạt khi nhấn mousedown trên cùng một phần tử trước
• mã này đặc biệt cũng hoạt động trong JFX Webview (vì contextmenusự kiện không được kích hoạt ở đó)
• nó không kích hoạt khi phím ContextMenu trên bàn phím được nhấn (như các giải pháp với on('contextmenu', ...)làm

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

Vâng, đúng vậy!

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
}

Có, oncontextmenu có lẽ là sự thay thế tốt nhất nhưng hãy lưu ý rằng nó kích hoạt trên chuột xuống trong khi nhấp chuột sẽ kích hoạt khi chuột lên.

Các câu hỏi liên quan khác được hỏi về nhấp đúp chuột phải - dường như không được hỗ trợ ngoại trừ thông qua kiểm tra hẹn giờ thủ công. Một lý do bạn có thể muốn có thể nhấp đúp chuột phải là nếu bạn cần / muốn hỗ trợ nhập chuột trái (đảo ngược nút). Việc triển khai trình duyệt dường như đưa ra rất nhiều giả định về cách chúng ta nên sử dụng các thiết bị đầu vào có sẵn.

Cách dễ nhất để có được nhấp chuột phải được thực hiện là sử dụng

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

 });

Tuy nhiên đây không phải là giải pháp trình duyệt chéo, các trình duyệt hoạt động khác nhau cho sự kiện này, đặc biệt là firefox và IE. Tôi muốn giới thiệu dưới đây cho một giải pháp trình duyệt chéo

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

Đó là cách dễ nhất để kích hoạt nó và nó hoạt động trên tất cả các trình duyệt ngoại trừ các lần xem web ứng dụng như (CefSharp Chromium, v.v.). Tôi hy vọng mã của tôi sẽ giúp bạn và chúc may mắn!

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>

Nếu bạn muốn gọi hàm trong khi sự kiện nhấp chuột phải có nghĩa là chúng ta có thể sử dụng như sau

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

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

Điều này được làm việc với tôi

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

Hãy thử sử dụng whichvà / hoặcbutton tài sản

Bản demo

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

Một số thông tin ở đây

Xử lý sự kiện bằng jQuerythư viện

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

Để xử lý nhấp chuột phải từ chuột, bạn có thể sử dụng sự kiện 'oncontextmenu'. Dưới đây là một ví dụ:

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

đoạn mã trên cảnh báo một số văn bản khi nhấn chuột phải. Nếu bạn không muốn menu mặc định của trình duyệt xuất hiện, bạn có thể thêm return false; Vào cuối nội dung của chức năng. Cảm ơn.

Vâng, đó là một sự kiện mousedown javascript. Có một plugin jQuery để làm điều đó