【JavaScript】右クリックをトリガーにしたイベント

JavaScriptイベント

要素上での右クリックをトリガーにしたJavaScriptイベントの実装

ブラウザのコンテキストメニュー以外の動作を指定したい場合に有効なトリガーイベントです

JavaScript・jQueryそれぞれ、functionとアロー関数版のサンプルコードです

JavaScriptでの右クリックイベント動作サンプル

動作サンプルでは右クリック時にクリック数をカウントして表示しています

See the Pen JavaScript click ivent by yochans (@yochans) on CodePen.

JavaScript、右クリックイベントのサンプルコード

HTML

<div id="item"></div>

JavaScript(function)

const target = document.getElementById('target');
let count = 0;

target.oncontextmenu = function(){
  //処理
    return false;
}

JavaScript(アロー関数)

const target = document.getElementById('target');
let count = 0;

target.oncontextmenu = () => {
  //処理
    return false;
}

 

jQueryでの右クリックイベント動作サンプル

動作サンプルでは右クリック時にクリック数をカウントして表示しています

See the Pen JavaScript right click ivent(jQuery) by yochans (@yochans) on CodePen.

jQuery、右クリックイベントのサンプルコード

HTML

let count = 0;

$('#target').on('contextmenu',function(){
  //処理
    return false;
});

jQuery(アロー関数)

let count = 0;

$('#target').on('contextmenu', () => {
  //処理
    return false;
});

JqueryではcontextMenu()も用意されています

oncontextmenuについて

左クリックでいうところの「onclick」に相当するイベントキーです
「addEventListener」では使えませんが「contextmenu」とすると同様の処理が実装可能です
しかし「contextmenu」のサポートはfirefoxのみとか書いてあったサイトがあり念のため避けてあります(Chrome,edgeでの動作も確認はしました)

const target = document.getElementById('target');
let count = 0;

target.addEventListener("contextmenu", () => {
  
  //処理
    return false;
  
}, false);

return falseについて

「return false;」と処理に記述する事でコンテキストメニューを表示しなくなります

JavaScriptイベント

Posted by Yousuke.U