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

2019年8月25日JavaScript,イベント

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

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

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

JavaScriptで左クリックや右クリックイベントの実装方法 | ONE NOTES

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;」と処理に記述する事でコンテキストメニューを表示しなくなります

2019年8月25日JavaScript,イベント

Posted by Yousuke.U