คลิกขวาที่เหตุการณ์ Javascript หรือไม่

คลิกขวาที่เหตุการณ์ Javascript หรือไม่ ถ้าเป็นเช่นนั้นฉันจะใช้มันได้อย่างไร

เป็นคนอื่นได้กล่าวถึงปุ่มเมาส์ขวาสามารถตรวจพบได้ผ่านเหตุการณ์ของเมาส์ปกติ (mousedown, mouseup คลิก) อย่างไรก็ตามหากคุณกำลังมองหาเหตุการณ์ยิงเมื่อเมนูคลิกขวาปรากฏขึ้นคุณกำลังมองหาสถานที่ที่ไม่ถูกต้อง เมนูคลิกขวา / บริบทสามารถเข้าถึงได้ผ่านทางแป้นพิมพ์ (Shift + F10 หรือปุ่มเมนูบริบทบน Windows และ Linux บางตัว) ในสถานการณ์นี้เหตุการณ์ที่คุณกำลังค้นหาคือ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: ปุ่มที่สี่โดยทั่วไปจะเป็นปุ่ม Back Browser
• 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เหตุการณ์ จะพิจารณาประเด็นต่อไปนี้:

• เปิดเม้าส์
• ทริกเกอร์เฉพาะเมื่อกด mousedown ในองค์ประกอบเดียวกันก่อน
• รหัสนี้โดยเฉพาะอย่างยิ่งยังทำงานใน 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      
    }
});

นั่นเป็นวิธีที่ง่ายที่สุดในการเริ่มต้นใช้งานและทำงานบนเบราว์เซอร์ทั้งหมดยกเว้น webviews แอปพลิเคชันเช่น (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");
}

ลองใช้whichและ / หรือ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 เช่นกัน