onmousedown

イベントハンドラのonmousedownについて、サンプルコードを示しながら使い方を説明しています。

onmousedownの基本的な使い方

イベントハンドラのonmousedownは、ページや要素内でマウスボタンが押された時に処理を実行できます。

以下は、利用例です。

【onmousedown利用例】

<div id="test-down">
ここをクリックします。
</div>

<script>
const x = document.querySelector("#test-down");
x.onmousedown = function(){alert("テストです");};
</script>

赤字部分でmousedownイベントを登録しています。

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

ここをクリックします。

要素内でマウスをクリックすると、アラートが表示されます。

onmousedownとonclickの違い

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

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

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

画像の保存禁止

通常、画像はドラッグ&ドロップできます。ドラッグ(左クリックしたまま)して、パソコンのデスクトップ上でドロップ(クリックを離す)すると、画像をダウンロードできます。また、右クリックするとメニューが表示され、画像の保存などが行えます。以下の画像で試してみてください。

onmousedownを使うと、これを禁止することができます。

【img要素での利用例】

<img src="image.png" alt="画像" id="test-down">

<script>
const x = document.querySelector("#test-down");
x.onmousedown = function(){alert("禁止");};
x.oncontextmenu = function(event){event.preventDefault();};
</script>

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

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

なお、FireFoxやGoogle Chrome、Microsoft Edgeは、onmousedownだけでメニュー表示を禁止できますが、Internet Explorerはできません。このため、上記ではoncontextmenuも併用しています。oncontextmenuにより、event.preventDefault();でイベントのキャンセルを行い、メニュー表示を禁止できます。

アラートを表示させたくない場合、function(){alert("禁止");}をoncontextmenuと同じfunction(event){event.preventDefault();}に書き換えてください。

また、oncontextmenuをhtml要素に適用すると、ページ全体で右クリックを禁止できるだけでなく、Shift+F10等でのメニュー表示も禁止できます。

【html要素での利用例】

<html id="test-down">
<head>
・・・
<script>
const x = document.querySelector("#test-down");
x.oncontextmenu = function(event){event.preventDefault();};
</script>
</head>

<body>
・・・
</body>
</html>

画像の保存は、ブラウザの機能で画像含めてページ全体を保存する、画像に直接アクセスするなどでも可能です。このため、ここで説明した方法でやりづらくはなりますが、完全に防ぐことはできない点は留意してください。

HTMLの属性として記述する(非推奨)

onmousedownは、HTMLの属性としても記述できます。

【onmousedownをHTML属性で記述する例】

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

divタグで、onmousedown属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
onmousedown	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
onmousedown	〇	〇	〇	〇	〇	〇

〇: サポート
△: 制限あり
×: 未サポート
？: 不明

IE: Internet Explorer
Ed: Edge
Fx: Firefox
Ch: Chrome
Sa: Safari
Op: Opera
An: Android Browser
Sm: Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

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