JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで特定の要素のマウスイベントを無効化する方法【pointer-eventsプロパティ活用】

JavaScriptを使って特定の要素上でマウスイベントを無効にする方法

Webページの開発において、特定の要素に対してクリックやホバーなどのマウス操作を一時的に無効にしたいケースがあります。JavaScriptでは、要素の style.pointerEvents プロパティを操作することで、マウスイベントの有効・無効を簡単に切り替えることができます。

pointer-events は本来CSSのプロパティですが、JavaScriptから動的に変更することも可能です。値を none に設定するとその要素はマウス操作を受け付けなくなり、auto に戻すと再びイベントが有効になります。

実装例（サンプルコード）

以下は、「DISABLE」ボタンをクリックするとテキスト要素のマウスイベントが無効になり、「ENABLE」ボタンをクリックすると再有効化されるサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
        cursor: pointer;
    }
    .size {
        font-size: 30px;
    }
</style>
</head>
<body>
<h1>JavaScriptでマウスイベントを無効化</h1>
<div class="result">これはdiv内のテキストです</div>
<button class="Btn">DISABLE（無効化）</button>
<button class="Btn">ENABLE（有効化）</button>
<h3>
上のボタンをクリックしてマウスイベントの有効／無効を切り替えてみてください
</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelectorAll(".Btn");
    resEle.addEventListener("click", () => {
        resEle.classList.toggle("size");
    });
    // DISABLEボタン：マウスイベントを無効化
    BtnEle[0].addEventListener("click", () => {
        resEle.style.pointerEvents = "none";
    });
    // ENABLEボタン：マウスイベントを有効化
    BtnEle[1].addEventListener("click", () => {
        resEle.style.pointerEvents = "auto";
    });
</script>
</body>
</html>

コードの解説

  • resEle.addEventListener("click", ...) — 紫色のテキスト（div要素）がクリックされると、classList.toggle() によってフォントサイズを切り替えます。
  • pointer-events: none — DISABLEボタンを押すとこのスタイルが適用され、テキスト要素はクリックなどのマウスイベントを一切受け付けなくなります。
  • pointer-events: auto — ENABLEボタンを押すと元の状態に戻り、再びクリックイベントが反応するようになります。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで特定の要素のマウスイベントを無効化する方法【pointer-eventsプロパティ活用】

紫色のテキストをクリックした場合： クリックのたびに文字サイズが拡大・縮小します。

JavaScriptで特定の要素のマウスイベントを無効化する方法【pointer-eventsプロパティ活用】

DISEABLEボタンをクリックした後にテキストをクリックした場合： pointer-events が none になっているため、文字サイズは変化しません。

JavaScriptで特定の要素のマウスイベントを無効化する方法【pointer-eventsプロパティ活用】

ENABLEボタンをクリックした後にテキストをクリックした場合： マウスイベントが再度有効になり、文字サイズが切り替わります。

JavaScriptで特定の要素のマウスイベントを無効化する方法【pointer-eventsプロパティ活用】

まとめ

このように、element.style.pointerEvents の値を none / auto で切り替えるだけで、特定の要素のマウスイベントを自由に制御できます。モーダル表示中の背面操作防止や、読み込み中の一時的な操作禁止など、さまざまな場面で応用できる便利なテクニックです。

  1. JavaScriptでキューに要素を追加する（エンキュー）方法

    キューへの要素追加（エンキュー）とは キューに要素を追加すること（エンキュー）とは、コンテナ配列の末尾に新しい要素を加える操作です。本記事では、配列の末尾をキューの「尾部（tail）」として扱い、すべての挿入操作をこの末尾に対して行います。つまり、先入れ先出し（FIFO）の構造において、新しく入ってくる要素は常に列の最後尾へ並ぶことになります。 この考え方に基づけば、enqueue 関数は次のようにシンプルに実装できます。 実装例：enqueue関数 enqueue(element) { // キューが満杯かどうかをチェック if (this.isFull()) {

  2. JavaScriptのsplice()メソッドで配列から要素を削除する方法【コード例付き】

    JavaScriptのsplice()メソッドを使うと、配列から指定した位置の要素を簡単に削除できます。このメソッドは元の配列を直接変更する点が特徴です。 splice()メソッドの基本構文 arr.splice(start, deleteCount) start: 削除を開始するインデックス位置（0から始まります） deleteCount: 削除する要素の数。省略すると、開始位置から配列の末尾までがすべて削除されます 以下は、splice()メソッドを使用して配列の1番目から5番目の間の要素（インデックス1〜4）を削除するサンプルコードです。 コード例 <!DOCTYPE html