業務アプリを開発していると良く遭遇するこの問題…。 基本的には HTML のトップレベルで対応することで対策が無難と思います。 いわゆるホワイトリスト方式（基本は拒否。許可するものだけリストアップ。）です。
禁止したい機能は以下のようなものを想定しています。
- テキスト選択
- 右クリックメニュー（コンテキストメニュー）
- Ctrl を押しながら マウスホイール
- テキスト、ファイルのドラッグ & ドロップ
サンプルコード with jQuery
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// document (トップレベル) に対して処理するところが ポイント
$(document).on('mousedown', function (event) {
// テキスト選択処理を無効化
return false ;
}).on('selectstart', function () {
// テキスト選択処理を無効化
return false ;
}).on('contextmenu', function (event) {
// 右クリックメニュー禁止
return false ;
}).on('mousewheel', function (event) {
// Ctrl + wheel による拡大縮小禁止
return !event.ctrlKey;
}).on('dragover', function (event) {
// ドラッグ&ドロップ禁止（テキスト、画像等の D&D によるページ遷移を防ぐ）
return false ;
}).on('drop', function (event) {
// ドラッグ&ドロップ禁止（テキスト、画像等の D&D によるページ遷移を防ぐ）
return false ;
});
</script>
</head>
<body>
<h1>メロンパン。</h1>
</body>
</html>
各禁止項目の詳細を以下で詳しく見ていきます。
テキスト選択 禁止
$(document).on('mousedown', function (event) {
return false ;
}).on('selectstart', function () {
return false ;
});
この処理で、必要な処理まで無効になってしまいます。 例えば、テキストボックスにおいてクリックによるキャレット移動、文字列選択が無効になります（下記デモ参照）。 キャレット移動、文字列選択を可能にするためには、有効化したいテキストボックスに対してバブルアップを禁止するようにします（下記サンプルコード参照）。
デモ （テキスト選択 禁止）
この DIV 領域内 はテキスト選択無効。 この領域外から D&D して選択は可能です。 それ故、テキスト選択を完全無効化するためには、 document に対して拒否する処理を記述する必要があります。
テキストボックスの選択可否：
選択不可
サンプルコード （キャレット移動、テキスト選択の許可）
$('#textbox').on('mousedown', function (event) {
event.stopPropagation();
}).on('selectstart', function (event) {
event.stopPropagation();
});
右クリック メニュー （コンテキストメニュー） 禁止
$(document).on('contextmenu', function (event) {
return false ;
});
右クリック メニュー （コンテキストメニュー） を明示的に禁止することで、 独自実装を行ったり、別機能を割り当てたりすることができるようになります。
Ctrl を押しながら マウスホイール （拡大縮小） 禁止
$(document).on('mousewheel', function (event) {
return !event.ctrlKey;
});
この実装、IE では有効ですが、残念ながら Chrome は正常に禁止できませんでした。。 Firefox、Opera 等は確認していないので不明です。
テキスト、ファイル の ドラッグ＆ドロップ 禁止
$(document).on('dragover', function (event) {
return false ;
}).on('drop', function (event) {
return false ;
});
ブラウザ の テキストボックス に メモ帳 等からテキストを D&D したり、 ブラウザ 画面内に 画像ファイル を D&D したりすると、ペーストや画面遷移を起こしてしまいます。 この実装では、そうした問題に対して対策となります。
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！