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

テキストや要素上での左クリックまたは右クリックをトリガーにしたJavaScriptイベントの実装方法です。
左クリックをトリガーにしたイベントの実装方法
JavaScriptで左クリックをトリガーにしたイベントの実装方法になります。
See the Pen JavaScript left click ivent by yochans (@yochans) on CodePen.
<div id="target">0</div>
サンプルでは要素にaddEventListener()
でclickを指定して左clickイベントを実装しています。
サンプルでは、クリックした回数をカウントアップで表示しています。
const target = document.getElementById('target');
let count = 0;//初期値
target.addEventListener('click', () => {
target.textContent = count++;
});
右クリックをトリガーにしたイベントの実装方法
JavaScriptで右クリックをトリガーにしたイベントの実装方法になります。
See the Pen JavaScript right click ivent by yochans (@yochans) on CodePen.
<div id="target">0</div>
ターゲット「target」要素に対してのoncontextmenu(右クリックメニュー)の実行を取得してクリックイベントを実装しています。
デフォルトの右クリックメニューはreturn false;で表示しないようにする事で対応しています。
サンプルでは、クリックした回数をカウントアップで表示しています。
const target = document.getElementById('target');
let count = 0;
target.oncontextmenu = function () {
target.textContent = count++;
return false;
};
ディスカッション
[…] JavaScriptで左クリックや右クリックイベントの実装方法 | ONE NOTES […]