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

HTML DOM click()メソッドの使い方を徹底解説！マウスクリックをシミュレートする方法

HTML DOM click()メソッドとは

HTML DOMのclick()メソッドは、要素に対してマウスクリックをシミュレートするためのメソッドです。ユーザーが実際にマウスでクリックしたときとまったく同じように、任意の要素をプログラム側から「クリック」できます。このメソッドを呼び出すと、対象要素のclickイベントが発火します。

なお、clickイベントにはイベントバブリング（event bubbling）が働きます。つまり、クリック対象の要素自身だけでなく、その親要素や祖先要素に登録されているクリックイベントハンドラも順番に実行されるという点に注意してください。

構文

HTML DOM click()メソッドの基本構文は以下のとおりです。

HTMLElementObject.click()

引数は不要で、戻り値もありません。対象の要素オブジェクトに対してclick()を呼び出すだけで、その要素へのクリック操作が実行されます。

サンプルコード

ここでは、ラジオボタンにマウスカーソルを乗せた（ホバーした）タイミングで、自動的にクリックをシミュレートする例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p>Hover over the radio button to simulate a mouse-click.</p>
<form>
<label>Radio <input type="radio" id="myRadio" name="choice"
onmouseover="clickFunction()"</label>
</form>
<p id="Sample"></p>
<script>
    function clickFunction() {
        document.getElementById("myRadio").click();
        document.getElementById("Sample").innerHTML = "Radio button has been clicked on
        mouse hover";
    }
</script>
</body>
</html>

実行結果

上記コードをブラウザで表示すると、次のようになります。

HTML DOM click()メソッドの使い方を徹底解説！マウスクリックをシミュレートする方法

そして、ラジオボタンにマウスカーソルを乗せると、ユーザーがクリックしなくてもボタンが自動的に選択され、メッセージが表示されます。

HTML DOM click()メソッドの使い方を徹底解説！マウスクリックをシミュレートする方法

コードの解説

まず、フォームの中にラベル付きのラジオボタンを作成し、idとして「myRadio」を設定しています。さらにonmouseover属性を指定することで、マウスホバー時に関数clickFunction()が呼び出されるようになっています。

<label>Radio <input type="radio" id="myRadio" name="choice" onmouseover="clickFunction()"</label>

次に、clickFunction()の中では、getElementById()メソッドを使ってid「myRadio」のラジオボタンを取得し、そのclick()メソッドを実行しています。これにより、ユーザーによる実際のクリックがなくてもラジオボタンが選択状態（チェック済み）になります。選択後は、innerHTMLプロパティを使って、id「Sample」の段落に成功メッセージを出力しています。

function clickFunction() {
    document.getElementById("myRadio").click();
    document.getElementById("Sample").innerHTML = "Radio button has been clicked on mouse hover";
}

click()メソッドのポイントまとめ

  • 引数なしで簡単に呼び出せる
  • ラジオボタンやチェックボックスなどのフォーム部品だけでなく、<button>や<div>などあらゆる要素に使用できる
  • onclick属性やaddEventListener()で登録したリスナーも通常どおり発火する
  • clickイベントはバブリングするため、親要素に設定されたハンドラも連鎖的に実行される
  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや