JavaScript マウスの右ボタンが押された時に処理する
マウスの右ボタンが押されたときに処理するには、「contextmenu」イベントを捕捉します。イベントを割り当てる要素に対して、「oncontextmenu」プロパティにイベントハンドラを設定するか、addEventListener()メソッドを使って設定します。呼び出されるイベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトにはイベントが発生した要素の情報も入っているため、サンプルのように要素に他しいて処理を行うこともできます。「contextmenu」イベント発生時に処理を行った場合、ブラウザが用意しているデフォルトのメニューが表示されます。これを防ぐには、「oncontexmenu」プロパティにイベントハンドラを割り当てた場合、処理を終わらせる際に「return false」を指定します。イベントリスナーを設定した場合は、イベントオブジェクトの「preventDefault()」メソッドを呼び出します。
<head>
<title>テストページ</title>
<style>
div{
width: 200px;
height: 200px;
background-color:silver;
}
</style>
</head>
<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output")[0];
//div要素への参照を変数に代入
var myArea = document.getElementsByTagName("div")[0];
myArea.addEventListener("contextmenu", function(evt){
//黄色に背景色を変更
evt.target.style.backgroundColor = "yellow";
ele.innerHTML="マウスの右ボタンが押されました";
//デフォルトのイベントを禁止
evt.preventDefault();
},false);
}, false);
</script>
<h1>右ボタンクリック処理</h1>
<div>マウスの右ボタンを押してください。</div>
<output></output>
</body>画面内の四角い領域でマウスの右ボタンを押すと、マウスの右ボタンが押されたことを示すメッセージが表示されます。
