JavaScript | デフォルトのイベントをキャンセルする方法
Javascriptでブラウザなどのアプリケーションで指定されているデフォルトのイベントをキャンセルする方法を紹介しています。
例えば、コンテキストメニューやマウス操作、ショートカットキーなどの動作をキャンセルします。
デフォルトのイベントをキャンセルする動作サンプル
様々なデフォルトのイベントをキャンセルする動作サンプルになります。
See the Pen JavaScript | Events triggered by Text selection by yochans (@yochans) on CodePen.
Javascriptでデフォルトのイベントをキャンセルして発生しないようにするには、目的のイベントを作成してpreventDefault()を指定する事で実行可能となっています。
event.preventDefault();テキストの選択をキャンセルする
JavascriptのaddEventListener()を使って、テキストの選択をキャンセルして制御するサンプルコードになります。
HTMLにはテスト用のテキストを<p>タグで設置。
<p class="cancel-select-text">This text cannot be selected.</p>テキストの選択を不可にする対象の<p>タグをdocument.querySelector(`.cancel-select-text`)で取得しています。
テキスト選択の発火イベントはaddEventListener()で「selectstart」を指定しています。
テキストの選択開始を制御してキャンセルする事で対象の要素内でのテキスト選択を不可にします。
// cancel text selection
document.querySelector(`.cancel-select-text`).addEventListener(`selectstart`, () => {
event.preventDefault();
});テキストのコピーをキャンセルする
JavascriptのaddEventListener()を使って、コピーをキャンセルするサンプルコードになります。
HTMLにはテスト用のテキストを<p>タグで設置。
<p class="cancel-copy-text">This text cannot be copied.</p>テキストのコピーを不可にする対象の<p>タグをdocument.querySelector(`.cancel-copy-text`)で取得しています。
コピーの発火イベントはaddEventListener()で「copy」を指定しています。
このイベントはコンテキストメニューやショートカットキーでのコピー操作に対しても有効です。
// cancel text copy
document.querySelector(`.cancel-copy-text`).addEventListener(`copy`, () => {
event.preventDefault();
});コンテキストメニューをキャンセルする
JavascriptのaddEventListener()を使って、コンテキストメニュー（右クリックメニュー）の表示をキャンセルするサンプルコードになります。
HTMLにはテスト用のテキストを<p>タグで設置。
<p class="cancel-contextmenu-area">This area cannot display the context menu.</p>コンテキストメニューを非表示にする対象の<p>タグをdocument.querySelector(`.cancel-contextmenu-area`)で取得しています。
右クリックの発火イベントはaddEventListener()で「contextmenu」を指定しています。
デフォルトのコンテキストメニューをキャンセルして、コンテンツ専用のコンテキストメニューを作成したりする際に利用できます。
// cancel context menu
document.querySelector(`.cancel-contextmenu-area`).addEventListener(`contextmenu`, () => {
event.preventDefault();
});リンクのクリックをキャンセルする
JavascriptのaddEventListener()を使って、リンクのクリックをキャンセルするサンプルコードになります。
HTMLにはテスト用のリンクを<a>タグで設置。
<a class="cancel-click-link" href="#" target="_blank" rel="noopener">This link cannot be clicked.</a>リンクのクリックを無効にする対象の<a>タグをdocument.querySelector(`.cancel-click-link`)で取得しています。
左クリックの発火イベントはaddEventListener()で「click」を指定しています。
一時的にリンクを無効化する際に利用可能です。
イベントのキャンセルだけでなく、マウスカーソルやリンクテキストのスタイルが変わらない様にする必要があります。
// cancel click link
document.querySelector(`.cancel-click-link`).addEventListener(`click`, () => {
event.preventDefault();
});
画像のドラッグをキャンセルする
JavascriptのaddEventListener()を使って、画像のドラッグをキャンセルするサンプルコードになります。
HTMLにはテスト用のテキストを<img>タグで設置しています。
<img class="cancel-drag-image" src="https://1-notes.com/wp-content/uploads/2022/02/cancel-drag-img.png" alt="This image cannot be dragged.">画像のドラッグを無効にする対象の<img>タグをdocument.querySelector(`.cancel-drag-image`)で取得しています。
要素のドラッグの発火イベントはaddEventListener()で「dragstart」を指定しています。
ドラッグ開始を制御する事でそれ以降のドラッグ操作も無効化します。
// cancel drag image
document.querySelector(`.cancel-drag-image`).addEventListener(`dragstart`, () => {
event.preventDefault();
});テキストフォームへの入力をキャンセルする
JavascriptのaddEventListener()を使って、テキストフォームへの入力をキャンセルするサンプルコードになります。
HTMLにはテスト用のテキストフォームを設置しています。
<input type="text" class="cancel-input-text" value="This text box cannot be input.">テキストフォームへの入力を無効にする対象のフォームパーツをdocument.querySelector(`.cancel-input-text`)で取得しています。
キー入力の発火イベントはaddEventListener()で「keydown」を指定しています。
実際には、フォームパーツの編集・変更を不可にするdisabled属性を活用する機会が多いと思います。
// cancel input text
document.querySelector(`.cancel-input-text`).addEventListener(`keydown`, () => {
event.preventDefault();
});チェックボックスの変更をキャンセルする
JavascriptのaddEventListener()を使って、スの変更をキャンセルするサンプルコードになります。
HTMLにはテスト用のテキストフォームを設置しています。
<input type="checkbox" class="cancel-check-checkbox" id="checkbox"/><label for="checkbox">This checkbox cannot be checked.</label>スの変更を無効にする対象のフォームパーツをdocument.querySelector(`.cancel-input-text`)で取得しています。
チェックボックスへのアクションをトリガーにした発火イベントはaddEventListener()で「click」を指定しています。
実際には、フォームパーツの編集・変更を不可にするdisabled属性を活用する機会が多いと思います。
// cancel check checkbox
document.querySelector(`.cancel-check-checkbox`).addEventListener(`click`, () => {
event.preventDefault();
});