JavaScript を使用して Div をクリック可能にする

Nithin Krishnan 2023年10月12日

JavaScript

onclick イベントハンドラーを使用して Div をクリック可能にする
条件付きクリックを Div に追加する
クリック可能な Div に機能があると便利
クリック可能な Div でアンカー要素の機能を実現

HTML の <a> タグ（またはアンカー要素）は、ナビゲーションコントロールに一般的に使用されます。これはクリック可能なタグであり、JavaScript コードがバックグラウンドで機能しなくても機能します。ブロック要素ではありません。アンカータグと同じように、パスへのルーティングに <div> タグを使用できますか？答えは間違いなくイエスですが、JavaScript コードを書く必要があります。div 要素でクリックハンドラーを使用して、クリック可能にすることができます。

`onclick` イベントハンドラーを使用して Div をクリック可能にする

アンカー要素はインラインで表示されます。また、この機能は、グラフィカルユーザーインターフェイスの設計時に常に有利に機能するとは限りません。div はスタンドアロンのブロック要素であるため、GUI の設計時に簡単に使用できます。div はコンテンツ分割要素であり、デフォルトではクリックできません。ユーザーが要素をクリックしたときに要素によって発行されたイベントを処理するには、onclick イベントハンドラーを使用する必要がある場合があります。onclick イベントハンドラーは、関数または関数の前にある JavaScript 式を受け入れます。ユーザーが div をクリックすると、javascript は実行時に関連する関数または式を実行します。onclick イベントハンドラーを div 要素に追加するには、いくつかの方法があります。

HTML コードと JavaScript コードの両方を組み合わせて Div をクリック可能にする

javascript および javascript のさまざまなフレームワークで最も広く使用されているアプローチは、関数呼び出しを HTML コードの onclick イベントハンドラーにリンクすることです。次に、それに関連付けられた関数定義を javascript コードに記述します。ユーザーが div をクリックすると、onclick イベントハンドラーは、div 要素の onclick に引数として渡された関数を実行します。次のコードを参照してください。

<div id="title-div" onclick="sayHello()"></div>

function sayHello() {
  console.log('Hello there !!');
}

ユーザーが title-div をクリックすると、関連関数 sayHello() が実行されます。そして、Hello there !!があります Web コンソールにログインしました。このアプローチは広く使用されており、純粋な javascript アプローチと比較してデバッグが容易です。HTML はバインディングを明示的に示しています。

純粋な JavaScript を使用して `div` をクリック可能にする

別のアプローチは、純粋に JavaScript ベースです。まず、document.getElementById()、document.getElementsByClassName()、document.querySelectorAll() などのメソッドを使用して、目的の HTML 要素を見つけます。HTML 要素を見つけるために最も一般的に使用されるメソッドは、document.getElementById() は、HTML で割り当てた id に基づいて HTML 要素を一意に識別します。要素 div 要素が見つかったら、onclick イベントハンドラーをアタッチし、div の click で実行される関数をリンクします。次のコードは、アプローチを詳しく説明しています。

<div id="title-div">Click here</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

上記のコードでは、onclick イベントハンドラーを純粋に JavaScript でバインドしています。HTML に onclick マッピングの痕跡はありません。HTML は、div 要素と関連する id でシンプルに保たれています。また、sayHello 関数オブジェクトを onclick イベントハンドラーに割り当てることに注意してください。sayHello の代わりに sayHello()（括弧付き）をリンクすると、JavaScript は window ロード自体で関数を実行します。また、ユーザーが div 要素をクリックしても何も起こりません。

条件付きクリックを Div に追加する

クリックイベントを条件付きでトリガーできます。HTML と JavaScript のアプローチを使用して、&&または||と組み合わせた式を追加できます。要件に基づいて署名します。JavaScript は、ブール式の評価方法に基づいて click イベントを実行します。true と評価された場合、JavaScript は関連する関数を実行します。

<div onclick="isEvenClick() && sayHello()">Click Here !!!</div>

function sayHello() {
  console.log('Hello');
}

function isEvenClick() {
  clickCounter++;
  return (clickCounter % 2 === 0)
}

上記のコードは、偶数回のクリックでのみ Hello をログに記録します。次のコードで詳しく説明するように、isEvenClick() 関数の代わりに式を使用して同じコードを記述することもできます。

<div onclick="(++clickCounter % 2 === 0) && sayHello()" id="title-div">Click here</div>

式は、実行時に clickCounter の値について評価されます。clickCounter が偶数の場合、式 (++clickCounter % 2 === 0) は true と評価され、sayHello() 関数が実行されます。

クリック可能な Div に機能があると便利

click リスナーを div に追加しても、それは div のままです。ユーザーは、その HTML 要素にユーザーインタラクションが関連付けられているかどうかを理解できません。そのために、CSS スタイルを使用して機能を追加できます。そのようなことの 1つは、カーソルを手のアイコンにすることです。cursor: pointer を使用してそれを行うことができます。この HTML 要素が実用的であることをエンドユーザーに示唆することは、UI / UX の良い習慣です。私たちは次の方法でそれを行うことができます。

<div onclick="sayHello()" style="cursor: pointer;">Click Here !!!</div>

実行時に要素にスタイルを追加することで、純粋な JavaScript を使用して同じことを実現できます。最初に document.getElementById() を使用して要素を選択し、次に el.style.cursor を使用してカーソルスタイルを追加し、それに文字列値 pointer を割り当てます。次のコードはそれを説明しています。

<div onclick="sayHello()">Click Here !!!</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.style.cursor = 'pointer';
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

クリック可能な Div でアンカー要素の機能を実現

div 要素を使用して、anchor 要素を模倣できます。<a> タグには、ハイパーリンクを作成する href という属性があります。div の onclick を使用して同じ動作を模倣できます。HTML コードで click イベントをキャプチャする関数をリンクします。JavaScript コードでは、window.location.href 属性を使用して URL を div にリンクします。次のコードで機能することを確認してください。

<div onclick="navToGoogle()" style="cursor: pointer;">Take me to Google</div>

function navToGoogle() {
  window.location.href = 'https://www.google.com';
}

onclick イベントハンドラーを使用して Div をクリック可能にする