JavaScriptイベントを右クリックしますか？
回答:
他の人が述べたように、右マウスボタンは通常のマウスイベント（マウスダウン、マウスアップ、クリック）を通じて検出できます。ただし、右クリックメニューが表示されたときに発砲イベントを探している場合、間違った場所を探していることになります。右クリック/コンテキストメニューには、キーボードからアクセスすることもできます（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!");
}
(isRightMB?"was not" : "")なければなりません(isRightMB?"was" : "was not")。正しい ？それを確認するのを助けてください。
onmousedown、onmouseupはトリガーされませんonclick。どうやら、Chromeではonclick、左マウスボタンに対してのみトリガーされます。（そして、はい、私はこれを何度もテストしました）右マウスクリックを検出するには、とを組み合わせるか、onmousedownをonmouseup使用する必要がありますoncontextmenu。
window.oncontextmenuたとえば、イベントを使用できます。
window.oncontextmenu = function () {
alert('Right Click')
}<h1>Please Right Click here!</h1>window.oncontextmenu = function () { e.preventDefault() }うまくいきませんでした。
はい、w3cはクリックイベントによって右クリックを検出できると言っていますが、通常のブラウザーでは右クリックによってonClickがトリガーされません。
実際、右クリックはonMouseDown、onMouseUpおよびonContextMenuのみをトリガーします。
したがって、「onContextMenu」は右クリックイベントと見なすことができます。これはHTML5.0標準です。
右マウスクリックを検出する場合は、MouseEvent.whichプロパティが非標準であり、ブラウザ間で大きな非互換性があるため、プロパティを使用しないでください。（MDNを参照）代わりにを使用してくださいMouseEvent.button。指定されたボタンを表す数値を返します。
0：押されたメインボタン、通常は左ボタンまたは初期化されていない状態1：補助ボタンが押されました。通常、ホイールボタンまたは中央ボタン（存在する場合）2：押されたセカンダリボタン、通常は右ボタン3：4番目のボタン、通常はブラウザの[戻る]ボタン4：5番目のボタン、通常はブラウザの[進む]ボタン
MouseEvent.button 標準のマウスだけでなく、より多くの入力タイプを処理します。
ボタンの構成は、標準の「左から右」のレイアウトとは異なる場合があります。左利き用に構成されたマウスでは、ボタンの操作が逆になる場合があります。一部のポインティングデバイスはボタンが1つだけで、キーボードまたはその他の入力メカニズムを使用してメイン、セカンダリ、補助などを示します。その他のポインティングデバイスには、さまざまな機能とボタン値にマップされた多くのボタンがある場合があります。
参照：
次のコードは、jQueryを使用rightclickして、デフォルトmousedownとイベントに基づいてカスタムイベントを生成していますmouseup。次の点を考慮します。
- マウスアップでトリガー
- 同じ要素を前にマウスダウンしたときにのみトリガー
- このコードは特にJFX Webviewでも機能します（
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
}
elem.addEventListener("click", doSomething)
右クリックを実行する最も簡単な方法は、
$('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など...）のようなアプリケーションのWebビューを除くすべてのブラウザーで機能します。私のコードがあなたと幸運を助けることを願っています！
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>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);
ここにいくつかの情報
マウスからの右クリックを処理するには、「oncontextmenu」イベントを使用できます。以下に例を示します。
document.body.oncontextmenu=function(event) {
alert(" Right click! ");
};上記のコードは、右クリックが押されたときにいくつかのテキストを警告します。ブラウザのデフォルトメニューを表示したくない場合は、return falseを追加できます。関数の内容の最後。ありがとう。