「キャンセル」ボタンをクリックしてもJavaScriptの警告ボックスが何も起こらないようにする方法

ネットワーク テクノロジーの発展に伴い、JavaScript はフロントエンド開発においてますます重要な役割を果たし、動的な Web ページを作成し、ユーザー インタラクション エクスペリエンスを向上させるために不可欠なツールとなっています。その中でも、最もよく使用される JavaScript コントロールの 1 つは、アラート ボックスです。 JavaScript コードで重要な情報を表示したり、ユーザーに確認したりする必要がある場合、通常はプロンプト ボックスをポップアップ表示する必要があります。ツールチップには通常、タイトル、メッセージ、および「確認」と「キャンセル」の 2 つのボタンが含まれています。ユーザーは、これらのボタンのいずれかをクリックして、続行方法を選択できます。この記事では、警告ボックスのキャンセル ボタンをクリックしたときにユーザーがアクションを実行できないようにする方法について説明します。

アラート ボックスの基本操作

基本的な JavaScript アラート ボックスを作成するには、JavaScript alert() 関数を使用する必要があります。この関数には、アラート ボックスのメッセージとして文字列パラメータがあり、その中には「確認」ボタンのみが含まれています。警告ボックスを作成する必要がある場合は、次のコードを使用できます。

alert("这是一条警告信息");

このコードが実行されると、ユーザーが「」ボタンを押すまで、ポップアップ警告ボックスが画面の中央に表示されます。確認」ボタンを押します。

alert() 関数に加えて、JavaScript では、confirm() 関数を使用して確認ボックスを作成するなど、他のタイプのアラート ボックスも提供します。この関数はalert()に似ていますが、「確認」と「キャンセル」という2つのボタンが含まれています。この関数は、ユーザーが「確認」をクリックすると true 値を返し、「キャンセル」をクリックすると false 値を返します。たとえば、次のコードを使用して確認ボックスを作成できます:

confirm("请确认您的操作");

この例では、ユーザーは「確認」または「キャンセル」を選択して、アクションを実行するかどうかを示すことができます。ユーザーが確認をクリックすると、関数は true 値を返し、それ以外の場合は false 値を返します。

キャンセル ボタンの定型化された処理

一般的に、ユーザーが JavaScript アラート ボックスで決定として「キャンセル」を選択できるようにしたいと考えています。ただし、ユーザーにアクションを実行するために [キャンセル] ボタンをクリックしてほしくない状況もあります。たとえば、場合によっては、アラート ボックスの代わりにユーザーが選択できるポップアップ メニューを表示する必要があります。この場合、「キャンセル」ボタンをクリックしたユーザーは、警告ボックスを閉じるだけで何もアクションを実行しません。

これを行うには、JavaScript を使用してロジックを制御します。 JavaScript アラート ボックスの外側で変数を宣言し、それを false に初期化できます。ユーザーがアラート ボックスの [キャンセル] ボタンを押すと、この変数を true に変更できます。コードを処理するときは、まず変数の値が true かどうかを確認します。この場合、このフェーズは無視され、何も行われません。以下に、キャンセル ボタンのロジック コントロールの使用方法を示すサンプル コードを示します。

let executeOperation = false;

if (confirm("是否执行此操作？")) {
    executeOperation = true;
}

if (executeOperation) {
    // 执行代码
} else {
    // 忽略阶段
}

この例では、ユーザーが確認をクリックすると、executeOperation 変数が true に設定され、操作が実行されます。それ以外の場合、コードはステージを無視します。

ロジック制御を処理するもう 1 つの方法は、try/catch ステートメントを使用することです。 try ブロックでコードの実行を試み、ユーザーが [キャンセル] ボタンをクリックしてエラーが発生した場合は、catch ブロックを使用してエラーを処理し、コードの実行が続行されないようにすることができます。サンプル コードは次のとおりです。

try {
    if (confirm("是否执行此操作？")) {
        // 执行代码
    } else {
        throw new Error("用户取消");
    }
} catch (err) {
    // 错误处理
    console.log(err.message);
}

この例では、ユーザーが [キャンセル] をクリックすると、コードによってエラーが発生し、catch ブロックでエラーが処理され、それ以降のコードの実行が阻止されます。

結論

JavaScript 開発において、アラート ボックスは、ユーザーの操作の確認を取得するための「確認」ボタンと「キャンセル」ボタンを備えた非常に実用的なツールです。ただし、アクションを実行するためにユーザーに [キャンセル] ボタンをクリックしてほしくない状況もあります。この場合、変数や try/catch ステートメントなどの論理制御を使用できます。これにより、ユーザーが [キャンセル] ボタンをクリックしたときにアクションを完全に無視できるようになり、エラーが回避されます。

以上が「キャンセル」ボタンをクリックしてもJavaScriptの警告ボックスが何も起こらないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。