テキストや要素上での左クリックまたは右クリックをトリガーにした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.querySelector('#target');
let count = 0; // 初期値

// 左クリックイベントを実装
target.addEventListener('click', () => {
	// 初期値に1を加算してテキストを書き換える
	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.querySelector('#target');
let count = 0; // 初期値

// 左クリックイベントを実装
target.oncontextmenu = function () {
	// 初期値に1を加算してテキストを書き換える
	target.textContent = count++;
	return false;
};