onmousedown/JavaScript

onmousedownの使い方

　onmousedownは、ページや要素内でマウスボタンが押された時に処理を実行出来ます。

　以下は、例です。

<div onmousedown="alert('テストです');">
ここをクリックします。
</div>

　実行例は、以下の通りです。尚、分かり易いように枠を付けています。

　要素内でマウスボタンを押すと、アラートが表示されます。

onmousedownとonclickの違い

　onmousedownと似たような動作をするイベントハンドラとして、onclickがあります。onclickは、要素内でマウスボタンが押され、その後離す動作をした時がイベント発生となります。onmousedownは、マウスボタンが押された時がイベント発生です。

　従って、onclickは要素内でマウスボタンが押された後、要素外で離すとイベントになりませんが、onmousedownではイベントになります。

　又、onclickは右ボタンではイベントになりませんが、onmousedownではイベントになります。

画像の保存禁止

　通常、画像はドラッグ&ドロップ出来ます。ドラッグ(左クリックしたまま)してブラウザ上部のアドレス欄(https://〜〜と記述してある所)にドロップ(クリックを離す)すると、ブラウザ上でその画像ファイルだけを表示します。パソコンのデスクトップ上でドロップすると、画像をダウンロード出来ます。又、右クリックするとメニューが表示され、画像の保存等が行えます。以下の画像で試してみて下さい。

　onmousedownを使うと、これを禁止する事が出来ます。

<img src="11.png" alt="スペードA" onmousedown="alert('禁止');" oncontextmenu="return false;" />

　実行例は、以下の通りです。

　画像を左クリックしても右クリックしてもアラートが表示されるため、ドラッグ&ドロップやメニュー表示が出来ません。

　尚、FireFoxやGoogle Chromeは、onmousedownだけでメニュー表示を禁止出来ますが、Internet ExplorerやMicrosoft Edgeでは出来ません。このため、上記ではoncontextmenuも併用しています。oncontextmenuは、右クリックによるメニュー表示の内容を変える事が出来ますが、return falseによりメニュー表示を禁止出来ます。

　因みに、アラートを表示させたくない場合、alert('禁止');をreturn false;に書き換えて下さい。

　又、以下のスクリプトにより、ページ全体で右クリックを禁止出来ます。

<script>
document.oncontextmenu = function () {
    return false;
};
</script>

　画像の保存方法は、左右のクリック以外にもあります。ブラウザの機能で画像含めてページ全体を保存する、画像に直接アクセスする等です。このため、ここで説明した方法でやり辛くはなりますが、完全に防ぐ事は出来ない点は留意して下さい。

サポート

・サポートするブラウザ

　以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

・サポートするタグ

　<br>や<iframe>等を除いた多くのタグでサポートされています。

「イベントハンドラ一覧」に戻る