マウスオーバーし、かつクリックされたら、関数を呼び出したい

Question

前提

あるSNSサイトで、たとえば facebook のような「いいね！」機能を実装しようとしています。そこで、下のような手順を考えました

1. いいね！ボタンにマウスポインターが乗ったら、時間を測り始める
2. もし、ボタンがすぐにクリックされたら、「いいね！」をして、かつ、時間計測をやめる
3. もし、すぐにボタンがクリックされずに、1秒経ったら、いくつかのリアクションのアイコンを表示し、かつ、時間計測をやめる
4. ボタンからマウスポインターが外れたら、時間計測をやめる。このとき、もしリアクションアイコンが表示されていたら、それを閉じる

マウスポインターがある要素に乗ったら、時間を測りたいので、下のようにonmouseoverを書きました

<button id="reaction" onmouseover="reaction()">Click this</button>

そして、下のような関数を書きました

function reaction() {

  const reaction = document.getElementById('reaction');
  reaction.addEventListener('click', console.log('Clicked'));
  
}

ボタンにマウスポインターが乗り、かつ (その後1秒経つ前に) ボタンがクリックされたら、ある関数を呼び出したいので、こういう記述をしました。(ある関数というのは、上の記述ではconsole.log('Clicked')です)

課題

しかし、なぜかマウスポインターが乗ったとたんにそのある関数が呼び出されてしまいます。「マウスポインターが乗りさらにクリックされたら」という条件のもとで関数を呼び出すことはできますか？

ご意見やヒント、参考情報がございましたら、お寄せくださいませ

Answer 1

reaction.addEventListener('click', function () { console.log('Clicked'); } );

Comments

[退会済みユーザー]

とてもはやいご回答をありがとうございます。そして、課題をクリアすることができました。無名関数っていうんでしたっけ？調べてみます

Answer 2

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const b=document.querySelector('#reaction');
  let timerId;
  b.addEventListener('mouseover',e=>{
    console.log("start");
    timerId=setTimeout(()=>{
      console.log("end");
      timerId=null;
    },1000);
  });
  b.addEventListener('mouseout',e=>{
    if(timerId){
      console.log("stop");
      clearTimeout(timerId);
      timerId=null;
    }
  });
  b.addEventListener('click',e=>{
    if(timerId){
      console.log("clicked");
      clearTimeout(timerId);
      timerId=null;
    }
  });
});
</script>
<button id="reaction">Click this</button>

Comments

[退会済みユーザー]

ありがとうございます。勉強になります...!