JavaScript - 右クリックイベント
JavaScriptで右クリックのイベントを実装する簡単なコード例です。
HTMLには、クリックする対象として<div>タグにid名「target」を指定しています。
<div id="target">0</div>
CSSでは、クリックの対象とするためのサイズを設定しています。
クリックする回数を表示するためのテキストプロパティを指定。
「cursor: pointer」でホバー時のマウスカーソルを指にしています。
#target {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
color: white;
width: 250px;
height: 250px;
border-radius: 50%;
text-align: center;
cursor: pointer;
user-select: none;
transition: 1s;
font-size: 40px;
background: #3cb371;
}
対象とする要素はquerySelector()
で指定、addEventListener()
を使ってクリックイベントを実装しています。preventDefault()
にてブラウザがデフォルトで実行するコンテキストメニューを開かないようにしています。
クリック時に対象の中にある数値を+1となるように書き換えています。
// 右クリックイベントを実装
document.querySelector('#target').addEventListener('contextmenu', () => {
// デフォルトの動作を実行しない
event.preventDefault();
// ターゲット内の数値を+1
document.querySelector('#target').textContent++;
console.log('click!');
});
![JavaScript - 右クリックイベント](/images/javascript/right-click-event/image-ja.png)