エコテキブログ

  1. TOPTOP
  2. Webサービス
  3. JavaScript

JavaScriptのHTMLElement​.click()はあたかも手動でクリックしたかのように自動でクリックするメソッド

htmlelement​-click_method_0

ドットインストールのレッスンをしているとき、JavaScriptにはHTMLElement​.click()というメソッドが存在していることに気がつきました。HTMLElement​.click()に関するドキュメント日本語版のMDNには存在しません（2019年4月23日時点）。

HTMLElement​.click()は自動でクリックするメソッド

HTMLElement​.click()について、英語版の公式ドキュメントを確認するとこのように概要説明がされています。

The HTMLElement.click() method simulates a mouse click on an element.

この説明で重要なところは、“simulates”の単語です。”simulates”をGoogle翻訳すると「似せる」・「似る」・「シュミレート」という訳語が紹介されます。つまりHTMLElement​.click()とは、ユーザーがあたかも手動でクリックしたかのごとく動作するという意味になります。

addEventListenerと比較

HTMLElement.click()の動作について、addEventListenerの’click’イベントと比較すると分かりやすいでしょう。

addEventListenerの場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Start Test</title>
</head>
<body>
  <button id="start">Start</button>
  <script>
    const start = document.getElementById('start');

    // addEventListenerを使う場合
    start.addEventListener('click', function(){
        console.log('Start!');
    });
  </script>
</body>
</html>

addEventListenerの場合、ユーザーがブラウザに表示されるボタンを手動でクリックしなければ、コンソール画面に”Start!”は表示されません。

HTMLElement.click()の場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Start Test</title>
</head>
<body>
  <button id="start">Start</button>
  <script>
    const start = document.getElementById('start');

    // HTMLElement.click()を使う場合
    function startTest () {
        start.click();
        console.log('Start!');
    }
    startTest();

  </script>
</body>
</html>

こちらの例ではstartTest関数の中で、HTMLElement.click()（start.click()）を使っています。この場合、ボタンを押すことなくコンソール画面に”Start!”が表示されます。