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

JavaScriptイベント

テキストや要素上での左クリックまたは右クリックをトリガーにしたJavaScriptイベントの実装方法です。

左クリックをトリガーにしたイベントの実装方法

JavaScriptで左クリックをトリガーにしたイベントの実装方法になります。

実装サンプル

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

HTML

<div id="target">0</div>

JavaScript

const target = document.getElementById('target');
let count = 0;//初期値

target.addEventListener('click', () => {
  
  target.textContent = count++;
  
}, false);

コード説明

サンプルでは要素にaddEventListener()でclickを指定して左clickイベントを実装しています。

サンプルでは、クリックした回数をカウントアップで表示しています。

右クリックをトリガーにしたイベントの実装方法

JavaScriptで右クリックをトリガーにしたイベントの実装方法になります。

実装サンプル

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

HTML

<div id="target">0</div>

JavaScript

const target = document.getElementById('target');
let count = 0;//初期値

target.oncontextmenu = function(){
  
  target.textContent = count++;
    return false;
  
};

コード説明

ターゲット「target」要素に対してのoncontextmenu(右クリックメニュー)の実行を取得してクリックイベントを実装しています。

デフォルトの右クリックメニューはreturn false;で表示しないようにする事で対応しています。

サンプルでは、クリックした回数をカウントアップで表示しています。

JavaScriptイベント

Posted by Yousuke.U